Bootstrap 3.0 - Create Bootstrap alert with jQuery

by Kieran Dang

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<button name="search" id="open-btn" class="btn btn-default">Open</button>
<div class="dialog hidden" role="dialog" id="confirm-dlg">
  <div class="panel-content">
    <div class="panel-body">
      <p>One fine body…</p>
    </div>
    <div class="panel-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
  <!-- /.modal-content -->
</div>

JavaScript

$('#open-btn').click(function(e) {
  $('#confirm-dlg').removeClass('hidden');
  $.fancybox.open($('#confirm-dlg'), {
    fitToView: true,
    modal: true,
    padding: 0,
    margin: 0,
    beforeShow: function() {
      var cancelBtn = $('#confirm-dlg .btn-default');
      cancelBtn.unbind('click');
      cancelBtn.click(function() {
        $.fancybox.close();
        return false;
      });

      var okBtn = $('#confirm-dlg .btn-primary');
      okBtn.unbind('click');
      okBtn.click(function() {
        alert('Saving ...')
      });
    }
  });
});