Created
October 22, 2016 19:08
-
-
Save todofixthis/6f68c0e7f4378e6a1eebb81b978740df to your computer and use it in GitHub Desktop.
Shows/Hides a Bootstrap 3 modal and returns a Promise object.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** 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(); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment