Skip to content

Instantly share code, notes, and snippets.

@makeusabrew
Created November 7, 2011 20:26
Show Gist options
  • Save makeusabrew/1346060 to your computer and use it in GitHub Desktop.
Save makeusabrew/1346060 to your computer and use it in GitHub Desktop.
Twitter Bootstrap - basic dialog box invocation via JavaScript
<!-- set up the modal to start hidden and fade in and out -->
<div id="myModal" class="modal hide fade">
<!-- dialog contents -->
<div class="modal-body">Hello world!</div>
<!-- dialog buttons -->
<div class="modal-footer"><a href="#" class="btn primary">OK</a></div>
</div>
// ensure modal is only shown on page load
$(function() {
// wire up the buttons to dismiss the modal when shown
$("#myModal").bind("show", function() {
$("#myModal a.btn").click(function(e) {
// do something based on which button was clicked
// we just log the contents of the link element for demo purposes
console.log("button pressed: "+$(this).html());
// hide the dialog box
$("#myModal").modal('hide');
});
});
// remove the event listeners when the dialog is hidden
$("#myModal").bind("hide", function() {
// remove event listeners on the buttons
$("#myModal a.btn").unbind();
});
// finally, wire up the actual modal functionality and show the dialog
$("#myModal").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : true // this parameter ensures the modal is shown immediately
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment