bootstrap modal popup example

bootstrap modal popup example on load.

by zachpainter77

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" id="modalButton" class="btn btn-primary btn-lg">
  Launch Employee Search Modal
</button>

<!-- Modal -->
<div class="modal fade" id="EmployeeSearchModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="max-width:700px;">
            <div class="modal-content">
                <div class="modal-header modal-header-info">
                    <span class="modal-title h5">Find a DES Employee</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-user"></i> First:
                                    </div>
                                    <input type="text" class="form-control input-sm" id="firstName" placeholder="First Name">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-user"></i> Last:
                                    </div>
                                    <input type="text" class="form-control input-sm" id="lastName"...

JavaScript

$(function(){
   //Code for click handler... This can be replaced by using data attributes on the button
   //can use data-toggle="modal" and data-target="#EmployeeModal" instead of jquery click handler
   $('#modalButton').click(function(){
   		$('#EmployeeSearchModal').modal();   
   });
   
   $('#EmployeeSearchButton').click(function(){
      //here is where you perform your search
      //fetch user list and update table
      $('#EmployeesTable').append('<tr><td>' + $('#firstName').val() + '</td><td>' + $('#lastName').val() + '</td></tr>');
      
   });
});