Tiny Responsive Modal Popup Plugin With jQuery - Mobilepopup

Tiny Responsive Modal Popup Plugin With jQuery - Mobilepopup
File Size: 10.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Mobilepopup is a lightweight, responsive, ajax-enabled jQuery popup plugin used to handle static and dynamic modal windows on your cross-platform web applications.

How to use it:

1. Add jQuery library together with the Mobilepopup plugin's JavaScript and CSS files to the html page.

<link rel="stylesheet" href="/path/to/mobilepopup.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/mobilepopup.min.js"></script>

2. Create the modal popup that is hidden on page load.

<div class="myPopup" style="display: none;">
  <div class="header">Modal Title</div>
  <div class="content">
    Modal Content
  </div>
  <div class="footer">
    Modal Footer
  </div>
</div>

3. Show the modal popup on the webpage.

$.mobilepopup({
  targetblock:".myPopup"
});

4. Or define your modal content directly in the JavaScript on init.

$.mobilepopup({
  html: 'Modal Content Here'
});

5. Change the default size of the modal popup.

$.mobilepopup({
  width:"500px",
  height:"300px"
});

6. Override the default close and loading template.

$.mobilepopup({
  closehtml: '<a href="" class="button-close close"></a>',
  loadinghtml: '<div class="loader-wrap"><div class="loader"><span></span><span></span><span></span></div></div>',
});

7. If you want to handle the modal popup via AJAX requests.

$.mobilepopup({
  ajax: ''
});

8. Add an extra CSS class to the modal popup.

$.mobilepopup({
  customclass: ''
});

9. Callback functions.

$.mobilepopup({
  onloaded : function(el){
      return true;
  },
  onclosed : function(el){
      return true;
  },
  onformsubmited : function(data,el){ 
      return true;
  }
});

Change log:

2017-07-11

  • set body overflow hidden

2017-07-04

  • fix set max sizes

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