Modal on Load

You can add a Modal that displays on the Page Load to any Page using the following setup:

Code Example

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

<!-- Modal -->
<div class="modal1 mfp-hide" id="myModal1">
	<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
		<div class="center" style="padding: 50px;">
			<h3>A Simple Example of a Text Modal</h3>
			<p class="nobottommargin">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 center nomargin" style="padding: 30px;">
			<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.

Ex: data-target="#myModal1"

data-delay

Time in milliseconds by which you want to delay the Display of the Modal.

Ex: data-delay="3000"

data-timeout

Time in milliseconds when you want to disable the Modal.

Ex: data-timeout="8000"

data-animation-in

Animation of the Modal when Display In.

Option(s): You can use all the available options from here: Animation Options.

Ex: data-animation-in="bounceInUp"

data-animation-out

Animation of the Modal when Display Out.

Option(s): You can use all the available options from here: Animation Options.

Ex: data-animation-out="bounceOutUp"

Enable Cookies on Modal

Note:

To enable Cookies on Modal, simply add the data-cookies="true" Attribute to the .modal-on-load Element.

<div class="modal-on-load" data-cookies="true" data-target="#myModal1" data-delay="5000" data-timeout="7000"></div>

<!-- Modal -->
<div class="modal1 mfp-hide" id="myModal1">
	<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
		<div class="center" style="padding: 50px;">
			<h3>A Simple Example of a Text Modal</h3>
			<p class="nobottommargin">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 center nomargin" style="padding: 30px;">
			<a href="#" class="button" onClick="$.magnificPopup.close();return false;">Close this Modal</a>
		</div>
	</div>
</div>

Last Modified: February 7, 2020