Press "Enter" to skip to content

Modal HTML Content in Popup Window JavaScript Library

Modal HTML Content in Popup Window – Modals.js is a lightweight conditional JavaScript library for displaying HTML content in a nice-looking popup.

automatic pop up window html, automatic pop up window html template, how to create popup in html with css, html code for popup window on page load, html popup window onclick

How to make use of it:

1. Load the modals.css and modals.js within the doc.

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

2. Insert HTML content to the modal window. Note that every modal should have a unique ID.

<div class="modal" id="demoModal">
  <div class="modal-body">
    <div class="modal-content">
      <div class="modal-close">&times;</div>
      <div class="modal-wrapper">
        <h2>Modal Title</h2>
        <p>Modal Content</p>
      </div>
    </div>
  </div>
</div>

3. Create an empty container for the fullscreen overlay.

<div class="modal-overlay"></div>

4. Create a link to toggle the modal window.

<a class="modal-open" href="/#" data-modal="demoModal">Open The Window</a>

5. Initialize the modal window and accomplished it.

const modals = new Modals();

6. Determine whether to permit a number of modal windows on a web page.

const modals = new Modals({
      allowMultiple: true 
});

7. Determine whether or not to lock the body scroll when the modal window is opened.

const modals = new Modals({
      lockScroll: false
});

Display HMTL Content In Popup Window, Modals.js Plugin/Github, open popup window on button click, modal popup in html, javascript open popup window


See Demo And Download

Official Website(dm-stanislav): Click Here

This superior jQuery/javascript plugin is developed by dm-stanislav. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *