Modal on Load

The Modal on Load shortcode opens a Magnific Popup automatically when the page finishes loading. It is ideal for welcome offers, coupons, newsletter sign-ups, and announcements. The trigger is a single empty element with the class modal-on-load; the actual popup content lives in a separate hidden container referenced by data-target.

How it works

Add a .modal-on-load element and point data-target at the id of a hidden modal wrapper. The modal wrapper uses the mfp-hide class (so it stays hidden until opened) plus a Canvas modal style class such as modal1.

<div class="modal-on-load" data-target="#myModal1"></div>

<!-- Hidden modal content -->
<div class="modal1 mfp-hide" id="myModal1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-white rounded p-5">
            <h3 class="mb-3">Welcome to our Store</h3>
            <p class="mb-0 op-07">Get 20% off your first order today.</p>
        </div>
    </div>
</div>

Key attributes

All attributes go on the .modal-on-load trigger element.

data-target: required. The id (with #) of the hidden modal container.
data-delay: milliseconds before the popup opens. Default 500. The plugin adds a further 500ms internally.
data-timeout: auto-close the popup after this many milliseconds (measured from open). Optional.
data-animate-in: an animation class applied on open, for example fadeInUp or fadeInUpSmall (combined with animated).
data-animate-out: an animation class applied just before close.
data-bg-click: set to false to stop the popup closing when the background is clicked. Default allows background click.
data-close-btn: set to false to hide the close button. Default shows it.
data-cookies: set to true to remember dismissal so the popup does not re-open once closed. Set to false to clear the stored cookie.
data-cookie-expire: cookie lifetime in days (used with data-cookies="true").
data-cookie-path: cookie path scope.

Example with animation and cookies

<div class="modal-on-load"
     data-target="#offerModal"
     data-delay="1200"
     data-animate-in="fadeInUp"
     data-cookies="true"
     data-cookie-expire="7"></div>

<div class="modal1 mfp-hide" id="offerModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-white rounded p-5 text-center">
            <h3 class="mb-3">Limited Time Offer</h3>
            <p class="mb-4 op-07">Sign up and save on your next purchase.</p>
            <a href="#" class="button button-rounded button-dark m-0">Claim Offer</a>
        </div>
    </div>
</div>

Dismiss and remember with a cookie

When data-cookies="true", a click on an element with the class modal-cookies-close inside the modal closes the popup and stores the dismissal, so returning visitors do not see it again until the cookie expires.

<a href="#" class="button modal-cookies-close">No thanks</a>

Tips

The data-target value must start with # (an id selector). A class or bare name will not work.
Keep data-delay modest (a few hundred to a couple of thousand ms) so the popup does not feel jarring.
Use data-cookies="true" with a sensible data-cookie-expire to avoid annoying repeat visitors.
The popup uses Magnific Popup under the hood, so it inherits the same fade and fixed-position behavior used elsewhere in Canvas lightboxes.

Usage

<div class="modal-on-load" data-target="#myModal1"></div>

<!-- Modal -->
<div class="modal1 mfp-hide" id="myModal1">
	<div class="block mx-auto bg-white" style="max-width: 500px;">
		<div class="text-center p-5">
			<h3>A Simple Example of a Text Modal</h3>
			<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum delectus, tenetur obcaecati porro! Expedita nostrum tempora quia provident perspiciatis inventore, autem eaque, quod explicabo, ipsum, facilis aliquid! Sapiente, possimus quo!</p>
		</div>
		<div class="section text-center m-0 p-4">
			<a href="#" class="button" onClick="$.magnificPopup.close();return false;">Close this Modal</a>
		</div>
	</div>
</div>

Settings

Setting	Description
`data-target`	The ID of the Modal you want to Target. Example: `#myModal1`
`data-delay`	Time in milliseconds by which you want to delay the Display of the Modal. Example: `3000`
`data-timeout`	Time in milliseconds when you want to disable the Modal. Example: `8000`
`data-animation-in`	Animation of the Modal when Display In. Example: `bounceInUp`
`data-animation-out`	Animation of the Modal when Display Out. Example: `bounceOutUp`
`data-bg-click`	Closes Modal on Background Click Example: `false`
`data-close-btn`	Displays a Close Button Example: `false`
`data-cookies`	Enables Cookie on the Modal Example: `subscription-modal`
`data-cookie-path`	Path of Current Page where the Cookie should be Valid
`data-cookie-expire`	Cookie Expiration time Example: `7`

Extras

An on-load modal can be shown only once per visitor by enabling cookies on it. The trigger element points at the modal with data-target and turns on cookie tracking with data-cookies="true".

<a href="#"
   class="modal-on-load"
   data-target="#promo-modal"
   data-cookies="true"
   data-cookie-expire="30"
   data-delay="1000"></a>

<div class="modal-on-load-inner" id="promo-modal">
    <h3>Welcome</h3>
    <p>Special offer inside.</p>
    <button class="modal-cookies-close button">Got it</button>
</div>

Attributes read by the Modal module:

data-target: the inline modal element to open (required).
data-cookies="true": remember dismissal so it does not reappear.
data-cookie-expire: cookie lifetime in days.
data-cookie-path: cookie path.
data-delay: delay before showing (ms, default 500).
data-timeout: auto-close after N ms.

Clicking an element with class modal-cookies-close closes the modal and writes the cookie (__cnvs_<modal-id>), so the modal will not show again until it expires. Set data-cookies="false" to clear that cookie.

Was this page helpful?