How to create a modal dialog in bootstrap?

Modal is basically a dialog box or popup window that is used to provide important information to the user or prompt user to take necessary actions before moving on. You can easily create very smart and flexible dialog boxes with the Bootstrap modal plugin.

Change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal dialog
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">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>
</div>
</div>

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

$('#myModal').modal(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as i

Name	Type	Default	Description
backdrop	boolean or the string `'static'`	true	Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	Closes the modal when escape key is pressed
show	boolean	true	Shows the modal when initialized.
remote	path	false	This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself. 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. An example of this is shown below: `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`

Final code and demo is here

<!DOCTYPE html><html>    <head>        <title>Tryit Editor - tools.bitcompiler.com</title>        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>    </head>    <body>         <div class="container-fluid">
            <h3>
How to create a modal dialog in bootstrap?</h3>
<br/>            <!-- Large modal -->            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>             <!-- Modal -->            <div class="modal fade bs-example-modal-lg" id="myModal" role="dialog">
                <div class="modal-dialog modal-lg">
                     <!-- Modal content-->                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">×</button>                            <h4 class="modal-title">
Modal 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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
</div>
<div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                        </div>
</div>
</div>
</div>
<!-- Small modal -->            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>             <div class="modal fade bs-example-modal-sm" id="myModal" role="dialog">
                <div class="modal-dialog modal-sm">
                     <!-- Modal content-->                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">×</button>                            <h4 class="modal-title">
Modal 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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
</div>
<div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                        </div>
</div>
</div>
</div>
<br/><br/>You can only see the difference in large screen         </div>
</body></html>

Demo

How to create a modal dialog in bootstrap?

Via data attributes

Via JavaScript

Options

No comments:

Post a Comment

Popular Posts

Tags

Contact Form