Prev Page
Next Page  
Bootstrap Modals
You can easily create bootstrap modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. The following example will show you how to create a simple modal with a header, message body and the footer containing action buttons for the user.
Via Javascript
Call a modal with id myModal with a single line of JavaScript
$('#myModal').modal(options) 
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Modals</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
 
<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">&times;</button>
                <h4 class="modal-title">Modal Box (Sample Header)</h4>
            </div>
            <div class="modal-body">
                <p>Lorem Ipsum is simply dummy text of the printing and 
                typesetting industry. Lorem Ipsum has been the industry's 
                standard dummy text ever since the 1500s.</p>
                <p class="text-warning">
                 <small>Lorem Ipsum is simply dummy text of the printing and
                 typesetting industry.</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">Submit</button>
            </div>
        </div>
    </div>
</div>
 
</div>
 
</body>
</html>
Output :
Modal Box
Activate Modals via Data Attributes
<!DOCTYPE html>
<html>
<head>
   <title>Activate Modals via Data Attributes</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid" style="padding-top:20px;">
 
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Click Here !</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">&times;</button>
                    <h4 class="modal-title">Sample Header</h4>
                </div>
                <div class="modal-body">
                    <p>Lorem Ipsum is simply dummy text of the printing and 
                    typesetting industry. Lorem Ipsum has been the industry's 
                    standard dummy text ever since the 1500s.</p>
                    <p class="text-warning">
                    <small>Lorem Ipsum is simply dummy text of the printing 
                    and typesetting industry.</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">Submit</button>
                </div>
            </div>
        </div>
    </div>
 
</div>
 
</body>
</html>
Output :
Click Here !
Modals via JavaScript
<!DOCTYPE html>
<html>
<head>
   <title>Modals via JavaScript</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid" style="padding-top:20px;">
 
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal").modal('show');
});
});
</script>
<!-- Button HTML (to Trigger Modal) -->
<a href="#" class="btn btn-lg btn-primary">Click Here !</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">&times;</button>
                <h4 class="modal-title">Sample Header</h4>
            </div>
            <div class="modal-body">
                <p>Lorem Ipsum is simply dummy text of the printing and 
                  typesetting industry. Lorem Ipsum has been the industry's 
                   standard dummy text ever since the 1500s.</p>
                <p class="text-warning"><small>Lorem Ipsum is simply dummy 
                text of the printing and typesetting industry.</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">Submit</button>
            </div>
        </div>
    </div>
</div>
 
</div>
 
</body>
</html>
Output :
Click Here !
Modal Box Sizes
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Modal Sizes</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid" style="padding-top:20px;">
 
<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">&times;</button>
                    <h4 class="modal-title">Large Modal</h4>
                </div>
                <div class="modal-body">
                    <p>You can add the <code>.modal-lg</code> class 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">&times;</button>
                    <h4 class="modal-title">Small Modal</h4>
                </div>
                <div class="modal-body">
                    <p>You can add the <code>.modal-sm</code> class 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>
 
</div>
 
</body>
</html>
Output :
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
Name Type Default Description
backdrop boolean or the string 'static' true Specify static for a backdrop, if you don’t want the modal to be closed when the user clicks outside of the modal.
keyboard boolean true Closes the modal when escape key is pressed; set to false to disable.
show boolean true Shows the modal when initialized.
remote path false

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source.

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>
Methods
These are the standard bootstrap's modals methods:
Method Description Example
.modal(options) Activates your content as a modal. Accepts an optional options object.
$('#identifier').modal({
keyboard: false
})
.modal('toggle') Manually toggles a modal.
$('#identifier').modal('toggle')
.modal('show') Manually opens a modal.
$('#identifier').modal('show')
.modal('hide') Manually hides a modal.
$('#identifier').modal('hide')
Events
All modal events are fired at the modal itself (i.e. at the <div class="modal">).
Event Type Description
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
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 (will wait for CSS transitions to complete).
loaded.bs.modal This event is fired when the modal has loaded content using the remote option.
$('#myModal').on('hidden.bs.modal', function (e) {
// some content...
})
  Prev Page
Next Page