#bootstrap modals

New Post has been published on http://www.htmluse.com/submodal/

Submodal

Download Demo

Submodal – Add submodals to Bootstrap 3.x modals

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="./components/bootstrap/dist/css/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="bs.sm.css"> <script type="text/javascript" src="./components/jquery/dist/jquery.js"></script> <script type="text/javascript" src="./components/bootstrap/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="bs.sm.js"></script>

2. HTML

Submodals are added to the .modal-body element of a modal. It’s HTML structure is identical to regular modals excluding the following two differences

Sub Modals do not have a .modal-header element

Sub Modals must have a class of .submodal (in addition to .modal)

<div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">[...]</div> <div class="modal-body"> <!-- Your Sub Modal, requires sub-modal class --> <div class="modal submodal">[...submodal content...]</div> <p>[parent modal content]</p> </div> <div class="modal-footer">[...]</div> </div> </div> </div>

This resembles Twitter Bootstrap’s data API:

Opening

<a href="#my-submodal" class="btn" data-toggle="submodal">Open Submodal</a>

Closing

<a href="#my-submodal" class="btn" data-dismiss="submodal">Close Submodal</a>

3. JAVASCRIPT

// Open $('#my-submodal').submodal('open'); // Close $('#my-submodal').submodal('close'); // Toggle $('#my-submodal').submodal('toggle');

4. EVENTS

New Post has been published on http://www.htmluse.com/twitter-bootstrap-modals/

Twitter Bootstrap Modals

Creating Modals with Twitter Bootstrap

Modals are basically a dialog box that is used to provide important information to the user or prompt user to take necessary actions before moving on. Modal windows are widely used to warn users for situations like session time out or to receive their final confirmation before going to perform any critical actions such as saving or deleting important data.

Using Twitter Bootstrap you can create very smart and flexible dialog boxes with the minimum efforts. The following example shows you how to create a simple modal with a header, message body and the footer containing action buttons for the user.

Example

Try this code »

<div id="myModal" class="modal fade">

<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">Confirmation</h4>

</div>

<div class="modal-body">

<p>Do you want to save changes you made to document before closing?</p>

<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>

</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>

</div>

</div>

— The above example launches the modal window when the DOM is fully loaded via JavaScript. The output will look something like this:

Activate Modals via Data Attributes

You can activate a Twitter Bootstrap modal window by clicking on the button or link without writing any JavaScript code via data attributes. Set data-toggle="modal" on a controller element, like a button or an anchor, along with a data-target="#myModal" or href="#myModal" to target a specific modal box.

Example

Try this code »

<!-- Button HTML (to Trigger Modal) -->

<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>

<!-- Modal HTML -->

<div id="myModal" class="modal fade">

<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">Confirmation</h4>

</div>

<div class="modal-body">

<p>Do you want to save changes you made to document before closing?</p>

<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>

</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>

</div>

</div>

The above example launches the modal window on click of “Launch Demo Modal” button via data attributes of Bootstrap modal.

Activate Modals via JavaScript

You may also activate a Twitter Bootstrap modal window via JavaScript — just call the modal() Bootstrap method with the modal "id" or "class" selector in your JavaScript code.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".btn").click(function()

$("#myModal").modal('show');

);

);

</script>

Changing the Sizes of Modals

Bootstrap gives you option further to scaling a modal up or down. You can a make modals larger or smaller by adding an extra class .modal-lg or .modal-sm on .modal-dialog.

Example

Try this code »

<!-- Large modal -->

<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Large modal</button>

<div id="largeModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Large Modal</h4>

</div>

<div class="modal-body">

<p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>

</div>

<div class="modal-footer">

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

<button type="button" class="btn btn-primary">OK</button>

</div>

</div>

</div>

</div>

<!-- Small modal -->

<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Small modal</button>

<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">

<div class="modal-dialog modal-sm">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Small Modal</h4>

</div>

<div class="modal-body">

<p>Add the <code>.modal-sm</code> class on <code>.modal-dialog</code> to create this small modal.</p>

</div>

<div class="modal-footer">

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

<button type="button" class="btn btn-primary">OK</button>

</div>

</div>

</div>

</div>

Options

There are certain options which may be passed to modal() Bootstrap method to customize the functionality of a modal window.

Name Type Default Value Description backdrop boolean or the string 'static' true Includes a modal-backdrop (black overlay area) element. Alternatively, you may specify static for a backdrop which doesn’t close the modal on click. keyboard boolean true Closes the modal window on press of escape key. show boolean true Shows the modal when initialized or activate. remote URL false If a remote url is provided, content will be loaded via jQuery’s load method and injected into the root of the modal element.

You can also set these options using the data attributes on modal box — just append the option name to data-, like data-backdrop="static", data-keyboard="false" etc.

If you’re using the data api for setting the options for modal window, you may alternatively use the “href” attribute to provide the URL of remote source like:

Example

Try this code »

<!-- Button HTML (to Trigger Modal) -->

<a href="remote.html" role="button" class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Launch Demo Modal</a>

<!-- Modal HTML -->

<div id="myModal" class="modal fade">

<div class="modal-dialog">

<div class="modal-content">

<!-- Content will be loaded here from "remote.php" file -->

</div>

</div>

</div>

Tip:You can prevent the modal box form closing when a user click on the backdrop (black overlay area) by setting the value of data attribute data-backdrop to static like data-backdrop="static".

Methods

These are the standard bootstrap’s modals methods:

.modal(options)

This method activates your content as a modal.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".launch-modal").click(function()

$("#myModal").modal(

keyboard: false

);

);

);

</script>

.modal(‘toggle’)

This method toggles a modal window manually.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".toggle-modal").click(function()

$("#myModal").modal('toggle');

);

);

</script>

.modal(‘show’)

This method can be used to open a modal window manually.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".open-modal").click(function()

$("#myModal").modal('show');

);

);

</script>

.modal(‘hide’)

This method can be used to hide a modal window manually.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".hide-modal").click(function()

$("#myModal").modal('hide');

);

);

</script>

Events

Bootstrap’s modal class includes few events for hooking into modal functionality.

Event Description show.bs.modal This event fires immediately when the show instance method is called. shown.bs.modal This event is fired when the modal has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired. hide.bs.modal This event is fired immediately when the hide instance method has been called. hidden.bs.modal This event is fired when the modal has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.

The following example displays an alert message to the user when fade out transition of the modal window has been fully completed.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$("#myModal").on('hidden.bs.modal', function()

alert("Modal window has been completely closed.");

);

);