Bootstrap Modal Base

by Christian Mueller

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<div class="page-container">
    <div class="container">
        <br />
        <button class="btn launchConfirm">Launch Confirm</button>
    </div>
</div>

<div id="modalEmployeeDialog" class="modal hide fade">
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">FirstName</label>
        <input type="text" class="form-control" id="dlgFirstName" placeholder="FirstName">
        
        <label for="exampleInputEmail1">LastName</label>
        <input type="text" class="form-control" id="dlgLastName" placeholder="LastName">
        
        <label for="exampleInputEmail1">EMailAddress</label>
        <input type="text" class="form-control" id="dlgEMailAddress" placeholder="EMailAddress">
        
        <label for="exampleInputEmail1">ADAccount</label>
        <input type="text" class="form-control" id="dlgADAccount" placeholder="ADAccount">
        
        <label for="exampleInputEmail1">Birthday</label>
        <input type="text" class="form-control" id="dlgBirthday" placeholder="YYYY-MM-DD">
        
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Create</button>
    <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
  </div>
</div>

CSS

body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
	overflow-y: scroll;
}

@media (max-width: 979px) {
	.modal-open .page-container .navbar-fixed-top{
		overflow-y: visible;
	}
}
.modal-body { bakground-color: white;}

JavaScript

$('.launchConfirm').on('click', function (e) {
    $('#modalEmployeeDialog')
        .modal({ backdrop: 'static', keyboard: false })
        .one('click', '[data-value]', function (e) {
            if($(this).data('value')) {
                alert('confirmed');
            } else {
                alert('canceled');
            }
        });
});