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">&times;</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 window
• data-target="#myModal" points to the id of the modal

The "Modal" part:
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.

---