Responsive Bootstrap-style Modal Window In Pure JS – Modal-JS

The Modal-JS JavaScript modal plugin helps you create responsive, themeable, Bootstrap-style modal dialogs on the webapp.

How to use it:

Import the Modal-JS plugin’s files into the html document.

<link href="css/my.css" rel="stylesheet">
<script src="js/my.js"></script>

Create the HTML for the modal dialog. You can also use the following CSS class to apply themes to the modal.

• modalPrimary
• modalSuccess
• modalInfo
• modalWarning
• modalDanger

<div id="myModal" class="modal">
  <div class="modalContent">
    <div class="modalHeader modalPrimary">
      <span class="modalClose" data-close="true" title="Close">&times;</span>
      Modal Header
    <div class="modalBody">
      <p>Modal Body</p>
    </div>
    <div class="modalFooter">
      Modal Footer
      <div>
        <button type="button" class="btn" data-close="true">Close</button>
        <button type="button" class="btn btnPrimary">Save</button>
      </div>
    </div>
  </div>
</div>