Tiny Responsive Modal Popup Plugin With jQuery - Mobilepopup

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. More configs with default values.

$.mobilepopup({
  ajax: '',
  html: '',
  targetblock: '',
  content: {
    header: '',
    content: '',
    footer: ''
  },

  type: 'standart', //'confirm'
  confirmcontent: {
    header: "Confirm your action",
    content: "Are you sure you want to continue?",
    buttonoktext: "Yes",
    buttonnotext: "Cancel"
  },

  width: '',
  height: '',

  submitformbutton: '.submit-mobilepopup-form',
  popupform: '.mobilepopup-form',

  closeonoverflowclick: true,
  shakeonoverflowclick: true,
  fullscreeninmobile: true,

  closehtml: '<a href="" class="button-close close"></a>',
  loadinghtml: '<div class="loader-wrap"><div class="loader"><span></span><span></span><span></span></div></div>',
  customclass: '',
});

10. Callback functions.

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

Change log:

v1.6 (2018-02-26)

• Bugfix.

v1.5 (2017-09-20)

• Added window type "standart" or "confirm"
• You can indicate form class and submit form button class
• Added properties closeonoverflowclick, shakeonoverflowclick, fullscreeninmobile
• Added folder with exapmles of use

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.