Javascript API: Methods and Events

Documentation
Developers
Javascript API: Methods and Events

Available since version 2.5.6 or higher.

Methods:

open: It allows to open the popup
close: It allows to close the popup

Open Popup by ID

jQuery(document).ready(function ($) {

var popup_id = 123;

MasterPopups.open(popup_id);

//Or using a jQuery selector

$('.mpp-popup-' + popup_id).MasterPopups();

});

Close Popup by ID

jQuery(document).ready(function ($) {

var popup_id = 123;

MasterPopups.close(popup_id);

});

Open Popup and Close

jQuery(document).ready(function ($) {

var popup_id = 123;

var $popup = MasterPopups.open(popup_id);

setTimeout(function () {

MasterPopups.close($popup);

}, 5000);

});

Events:

beforeOpen: It runs before opening the popup
afterOpen: It runs after opening the popup
beforeClose: It runs before closing the popup
afterClose: It runs after closing the popup
submit: It runs after sending the form

jQuery(document).ready(function ($) {

MasterPopups.on('beforeOpen', function ($, popup_instance, popup_id, options) {

console.log("Before Open Popup");

});

MasterPopups.on('afterOpen', function ($, popup_instance, popup_id, options) {

console.log("After Open Popup");

});

MasterPopups.on('beforeClose', function ($, popup_instance, popup_id, options) {

console.log("Before Close Popup");

});

MasterPopups.on('afterClose', function ($, popup_instance, popup_id, options) {

console.log("After Close Popup");

});

MasterPopups.on('submit', function ($, popup_instance, popup_id, options, success) {

console.log("On Form Submit");

});

Use cases:

Open a Popup by clicking on a button (HTML)

123 is the Popup ID

1	<a href="#" class="mpp-trigger-popup-123">Open popup</a>

1	<a href="mpp-trigger-popup-123">Open popup</a>

Open a Popup by clicking on a button

jQuery(document).ready(function ($) {

$('.link').on('click', function (e) {

var popup_id = 123;

MasterPopups.open(popup_id);

});

Contact Form 7: Open a Popup after sending the form

jQuery(document).ready(function ($) {

var wpcf7Elm = document.querySelector('.wpcf7');

wpcf7Elm.addEventListener('wpcf7submit', function (event) {

var popup_id = 123;

MasterPopups.open(popup_id);

}, false);

});

WooCommerce: Open a Popup when updating the Cart

jQuery(document).ready(function ($) {

$('body').on('added_to_cart', function () {

var popup_id = 123;

MasterPopups.open(popup_id);

});

Was this article helpful?

Like 3

Methods:

Open Popup by ID

Close Popup by ID

Open Popup and Close

Events:

Use cases:

Open a Popup by clicking on a button (HTML)

Open a Popup by clicking on a button

Contact Form 7: Open a Popup after sending the form

WooCommerce: Open a Popup when updating the Cart

Top Views

Recent topics

Integrations