Bs Modal
Bootstrap Modal Plugin
The Modal Plugin
The Modal plugin is a dialog box/popup window that is displayed on exceed of the electrical flow page: Tip: Plugins tin flame move included individually (using Bootstrap's private "modal.js" file), or all at nowadays (using "bootstrap.js" or "bootstrap.min.js").
How To Create a Modal
The next instance shows how to exercise a basic modal:Example
<!-- Trigger the modal amongst a push -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- 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>Some text inwards the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Example Explained
The "Trigger" part:To trigger the modal window, y'all take away to work a push or a link.
Then include the ii data-* attributes:
data-toggle="modal"
opens the modal windowdata-target="#myModal"
points to the id of the modal
The nurture
<div>
of the modal must choose an ID that is the same equally the value of the data-target attribute used to trigger the modal ("myModal").The
.modal
shape identifies the content of <div>
equally a modal as well as brings focus to it.The
.fade
shape adds a transition lawsuit which fades the modal inwards as well as out. Remove this shape if y'all exercise non desire this effect.The attribute
role="dialog"
improves accessibility for people using enshroud readers.The
.modal-dialog
shape sets the proper width as well as margin of the modal.The "Modal content" part:
The
<div>
amongst class="modal-content
" styles the modal (border, background-color, etc.). Inside this <div>
, add together the modal's header, body, as well as footer.The
.modal-header
shape is used to define the means for the header of the modal. The <button>
within the header has a data-dismiss="modal"
attribute which closes the modal if y'all click on it. The .close
shape styles the unopen button, as well as the .modal-title
shape styles the header amongst a proper line-height.The
.modal-body
shape is used to define the means for the torso of the modal. Add whatever HTML markup here; paragraphs, images, videos, etc.The
.modal-footer
shape is used to define the means for the footer of the modal. Note that this expanse is correct aligned yesteryear default.Modal Size
Change the size of the modal yesteryear adding the.modal-sm
shape for modest modals or .modal-lg
shape for large modals.Add the size shape to the
<div>
chemical component amongst shape .modal-dialog
:Small Modal
<div class="modal-dialog modal-sm">
Large Modal
<div class="modal-dialog modal-lg">
By default, modals are medium inwards size.
Comments
Post a Comment