Bootstrap Modals with basic code example

Twitter Bootstrap is popular front-end framework for HTML which is open source, adaptable and easy to customize  by web-developers for speedy development.

 

Essentially, it is not a framework per-se, but a collection of predefined styles and elements which can be used easily to build you own website in small amount of time ( some times feeling as if playing with LEGO’s ).

JavaScript components in form of jQuery plugins provide additional cool elements for your web page. Bootstrap JavaScript components are located in “bootstrap.js” or “bootstrap.min.js” and need to be included along with jQuery in your document.

Some of them are Modal, Collapse, Tooltip and Popover etc. and here you will see some basic explanations how to use Modal;

Bootstrap Modal is neat looking window, or element, that appears on top of your page with darkening effect for elements below it, toggling your hidden content when you need it ( via JavaScript or data attributes ) overriding default scrolling behavior. By default it has classes for content and size which speed up the works.

To call BS Modal via JavaScript just add line $(‘#id_of_element_used’).modal(options) in your script where options can be „show“, „keyboard“ or „backdrop“ and methods for modal „toggle“, „show“ or „hide“.

To call BS modal via data-attributes on element like button or image ( or some other control element ) simply add data-toggle=“modal“ and data-target=“#id_of_element_used“ or href=“#id_of_element_used“ as seen in code example bellow:

<div class=”container”>

<h1>Modal</h1>
<!– Trigger the modal with a button –>
<button type=”button” class=”btn btn-default” data-toggle=”modal” data-target=”#id_of_element_used”>Open Modal as  button</button>

<br>
<a data-toggle=”modal” href=”#id_of_element_used”>Open Modal as link</a>

<br>

<p data-toggle=”modal” data-target=”#id_of_element_used”>Open modal on click here<p>

<!– Modal –>
<div class=”modal fade” id=”id_of_element_used” role=”dialog”>
<div class=”modal-dialog”>
<!– Modal content–>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal”>&times;</button>
<h4 class=”modal-title”>Modal Header</h4>
</div>
<div class=”modal-body”>
<p>This is bootstrap modal</p>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div><!–/ –>
</div><!–/container –>

Bootstrap has 2 predefined classes for width; modal-lg and modal-sm, which can be used to determine how big  ( wide ) your modal will be by adding them to modal-dialog class definition:

<div class=”modal-dialog modal-lg”>…</div>

<div class=”modal-dialog modal-sm”>…</div>

By default, clicking outside of modal will close it which sometimes can be unwanted. To prevent this we can change data-backdrop  option to static which will force user to stay on modal until other closing method is fired. Changing other data-backdrop options will determine will elements bellow modal be shown with dark tone overlay ( default setting ) or transparently.

<button type=”button” class=”btn btn-default” data-toggle=”modal” data-target=”#id_of_element_used” data-backdrop=”true”>Modal with overlay (true)</button>
<button type=”button” class=”btn btn-default” data-toggle=”modal” data-target=”#id_of_element_used” data-backdrop=”false”>Modal without overlay (false)</button>
<button type=”button” class=”btn btn-default” data-toggle=”modal”  data-target=”#id_of_element_used” data-backdrop=”static”>Modal with static backdrop</button>

Also by default, clicking „ESC“ button on keyboard should hide modal, but there is reported issue with keyUp event not firing properly on newer versions of Bootstrap. Adding tabindex=”-1″ option will correct this issue most probably until new version of Bootstrap comes.

On the other hand, if there is need to prevent keyboard control over modal options can be changed to  data-keyboard=”false” which will turn off ability to hide modal using before mentioned „ESC“ key.

<button type=”button” class=”btn btn-default” id=”withESC” data-toggle=”modal” data-target=”#id_of_element_used” data-keyboard=”true” tabindex=”-1″>ESC</button>
<button type=”button” class=”btn btn-default” id=”noESC” data-toggle=”modal” data-target=”#id_of_element_used” data-keyboard=”false”>NoESC</button>

Bootstrap Modals do not support multiple opened modals simultaneously but putting modal inside modal with some custom coding can achieve some degree of usefulness. Default visual placement of child modal will be in center of parent modal and that can be changed by styling position of modal-content with some custom CSS. Also, data-backdrop and keyboard options should be used to maximize effective usability in parent-children relations.

 

Also,documentation advises placing modal html code on top-level in your document to avoid other components affecting functionality or appearance.

 

 

 

 

 

Leave a comment

Your email address will not be published. Required fields are marked *