zilveer/bootstrap.toggleModal.js

## bootstrap.toggleModal.js
/** Shows or hides a Bootstrap 3 modal and returns a Promise object.
 *
 * Bootstrap's modal functions return before the modal is shown/
 *  hidden, which can cause glitches if subsequent code doesn't
 *  expect that.
 *
 * Unfortunately, there is no built-in way to defer an
 *  operation until after the modal is shown/hidden, so
 *  this function does a little monkey-patching to make
 *  it work.
 */
function toggleModal(modal, state) {
  // Quick safety check, in case deferreds aren't working
  //  correctly.
  if(state == $('body').hasClass('modal-open')) {
    throw new Error(
      'Modal is already ' + (state ? 'shown' : 'hidden') + '!'
    );
  }

  var d = $.Deferred();

  modal
    .one(state ? 'shown.bs.modal' : 'hidden.bs.modal', d.resolve)
    .modal(state ? 'show' : 'hide');

  return d.promise();
};

## example.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>toggleModal Example</title>
    <link
        crossorigin="anonymous"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        rel="stylesheet">
  </head>

  <body>
    <!-- Loading modal, displayed while an ajax request is in progress. -->
    <div id="loading-modal" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Loading Content</h4>
          </div>

          <div class="modal-body">
            <em>Please wait....</em>
          </div>
        </div>
      </div>
    </div>

    <!-- Form modal, displays a form to initiate an ajax request. -->
    <div id="alpha-modal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              &times;
            </button>

            <h4 class="modal-title">Do Something Awesome</h4>
          </div>

          <div class="modal-body">
            <form id="alpha-form">
              <!-- Form contents go here. -->
            </form>
          </div>

          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal">
              Cancel
            </button>

            <button id="alpha-button" class="btn btn-success" type="submit">
              Start
            </button>
          </div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

    <script src="bootstrap.toggleModal.js"></script>
    <script>
      (function($) {
        $(function() {
          // Init modals.
          var loadingModal  = $('#loading-modal'),
              alphaModal    = $('#alpha-modal');

          // Loading modal should not be user-dismissable.
          loadingModal.modal({
            'backdrop': 'static',
            'keyboard': false,
            'show':     false
          });

          alphaModal.modal({
            'backdrop': true,
            'keyboard': true,
            'show':     false
          });

          // Wire up form.
          var alphaForm = $('#alpha-form');

          $('#alpha-button').on('click', function(event) {
            event.preventDefault();
            alphaForm.trigger('submit');
          });

          alphaForm.on('submit', function(event) {
            event.preventDefault();

            // Toggle the active modal.
            // Note that the ajax request will not get sent
            //  until the form has been hidden and the loading
            //  modal has been shown.
            toggleModal(alphaModal, false).done(function() {
              toggleModal(loadingModal, true).done(function() {
                $.post('...')
                  .always(function() {
                    // Can hide modal directly, since nothing has
                    //  to wait until this finishes.
                    loadingModal.modal('hide');
                  });
              });
            });
          });
        });
      })(jQuery);
    </script>
  </body>
</html>
	/** Shows or hides a Bootstrap 3 modal and returns a Promise object.
	*
	* Bootstrap's modal functions return before the modal is shown/
	* hidden, which can cause glitches if subsequent code doesn't
	* expect that.
	*
	* Unfortunately, there is no built-in way to defer an
	* operation until after the modal is shown/hidden, so
	* this function does a little monkey-patching to make
	* it work.
	*/
	function toggleModal(modal, state) {
	// Quick safety check, in case deferreds aren't working
	// correctly.
	if(state == $('body').hasClass('modal-open')) {
	throw new Error(
	'Modal is already ' + (state ? 'shown' : 'hidden') + '!'
	);
	}

	var d = $.Deferred();

	modal
	.one(state ? 'shown.bs.modal' : 'hidden.bs.modal', d.resolve)
	.modal(state ? 'show' : 'hide');

	return d.promise();
	};
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>toggleModal Example</title>
	<link
	crossorigin="anonymous"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	rel="stylesheet">
	</head>

	<body>
	<!-- Loading modal, displayed while an ajax request is in progress. -->
	<div id="loading-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-sm" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h4 class="modal-title">Loading Content</h4>
	</div>

	<div class="modal-body">
	<em>Please wait....</em>
	</div>
	</div>
	</div>
	</div>

	<!-- Form modal, displays a form to initiate an ajax request. -->
	<div id="alpha-modal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal">
	×
	</button>

	<h4 class="modal-title">Do Something Awesome</h4>
	</div>

	<div class="modal-body">
	<form id="alpha-form">
	<!-- Form contents go here. -->
	</form>
	</div>

	<div class="modal-footer">
	<button class="btn btn-default" data-dismiss="modal">
	Cancel
	</button>

	<button id="alpha-button" class="btn btn-success" type="submit">
	Start
	</button>
	</div>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>

	<script src="bootstrap.toggleModal.js"></script>
	<script>
	(function($) {
	$(function() {
	// Init modals.
	var loadingModal = $('#loading-modal'),
	alphaModal = $('#alpha-modal');

	// Loading modal should not be user-dismissable.
	loadingModal.modal({
	'backdrop': 'static',
	'keyboard': false,
	'show': false
	});

	alphaModal.modal({
	'backdrop': true,
	'keyboard': true,
	'show': false
	});

	// Wire up form.
	var alphaForm = $('#alpha-form');

	$('#alpha-button').on('click', function(event) {
	event.preventDefault();
	alphaForm.trigger('submit');
	});

	alphaForm.on('submit', function(event) {
	event.preventDefault();

	// Toggle the active modal.
	// Note that the ajax request will not get sent
	// until the form has been hidden and the loading
	// modal has been shown.
	toggleModal(alphaModal, false).done(function() {
	toggleModal(loadingModal, true).done(function() {
	$.post('...')
	.always(function() {
	// Can hide modal directly, since nothing has
	// to wait until this finishes.
	loadingModal.modal('hide');
	});
	});
	});
	});
	});
	})(jQuery);
	</script>
	</body>
	</html>