Modal on Load

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

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

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 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>