Pretty Simple Modal Popup Plugin - jq-modal

A tiny modal popup jQuery plugin to display a pretty clean yet highly customizable modal window on the webpage.

More Features:

• Prevents the body scroll when the modal is activated.
• Custom modal header, body, and footer.
• Custom close button.
• Allows you to override the default styles using your own CSS.
• Event handlers.

How to use it:

1. Load the stylesheet jq-modal.css for the default styling of the modal window.

<link rel="stylesheet" href="/path/to/css/jq-modal.css" />

2. Create a toggle button to open the modal window.

<button id="trigger">Launch The Modal</button>

3. Load the jq-modal plugin's script after the latest jQuery JavaScript library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jq-modal.js"></script>

4. Create a new modal window and insert your own modal header, body, footer as follows:

$('#trigger').on("click", function() {
  $(this).jmodal({
    header: "<h2>Header Text</h2>",
    body: function() {
      var $p = $('<p></p>');
      $p.text('This is sample text, click it for an alert!')
      .on("click", function() {
          alert("You clicked it!");
      });
      return $p;
    },
    footer: "<b>Footer</b>",
  });
});

5. Set the height/width of the modal window.

$('#trigger').on("click", function() {
  $(this).jmodal({

    // default: 'auto'
    height: "400px",

    // default: '300px'
    width: "80%"
    
  });
});

6. Customize the Close Text. Default: 'Close'.

$('#trigger').on("click", function() {
  $(this).jmodal({

     closetext: 'X'

  });
});

7. Default CSS classes & IDs.

$('#trigger').on("click", function() {
  $(this).jmodal({
    modalopencls: 'jqmodal-open',
    overlayid: 'jqmodal-overlay',
    parentid: 'jqmodal',
    actionbarcls: 'jqmodal-action',
    closecls: 'jqmodal-close',
    headercls: 'jqmodal-header',
    bodycls: 'jqmodal-body',
    footercls: 'jqmodal-footer'
  });
});

8. Event handlers.

$('body').on('modal-triggered', function() {
  console.log("MODAL TRIGGERED");
}).on('modal-opened', function() {
  console.log("OPENED MODAL");
}).on('modal-closed', function() {
  console.log("CLOSED MODAL");
});

9. You can also change the event names in the options object.

$('#trigger').on("click", function() {
  $(this).jmodal({
    triggerevt: 'modal-triggered',
    openevt: 'modal-opened',
    closeevt: 'modal-closed'
  });
});

10. Override the default styles of the modal window.

/* Default Modal Styles */
#jqmodal {
  background: #FFFFFF; padding: 10px; position: absolute; top: 50%; left: 50%;
  overflow: auto; max-height: 100%;
  transform: translate(-50%, -50%); 
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); 
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* Default Overlay Styles */
#jqmodal-overlay {
  background: rgba(0, 0, 0, 0.5); bottom: 0; left: 0; position: fixed;
  right: 0; top: 0; z-index: 10000;
}

11. Show & hide the modal window manually.

$(this).jmodal('show');
$(this).jmodal('hide');
$(this).jmodal('close');

Changelog:

2020-02-25

• Add show & hide methods.

---

This awesome jQuery plugin is developed by ZWhit196. For more Advanced Usages, please check the demo page or visit the official website.