Menu
I am stuck. Given Bootstrap 3.0 is about to be released, I decided to go with it for a new project. Things are going fine so far, but for the life of me, I can't figure out how to do a Modal Dialog in Bootstrap 3.0.
Does anyone have a simple example?
872
The Bootstrap modal component allows you to add a stylized dialog box to your website. Add a stylized dialog box to your website with the Bootstrap modal component.
Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds . modal-open to the <body> to override default scrolling behavior and generates a . modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
You could try to build the docs: Compile Twitter bootstrap 3 docs (How to)? so also http://bassjobsen.weblogs.fm/explore-and-install-twitter-bootstrap-3/ from the docs:
<!-- Button trigger modal --> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-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><!-- /.modal-dialog --> </div><!-- /.modal --> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
