Modal on load

Hello,

1. This can be best achieved by using a Custom Class on the Modal Content:

<div class="modal1 mfp-hide" id="myModal1">
	<div class="block custom-modal-width divcenter" style="background-color: #FFF;">
		<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>

and then use the following CSS Code:

.device-lg .custom-modal-width { max-width: 500px; }

.device-md .custom-modal-width { max-width: 400px; }

.device-sm .custom-modal-width { max-width: 300px; }

.device-xs .custom-modal-width { max-width: 200px; }

.device-xxs .custom-modal-width { max-width: 150px; }

1. This is Definitely Possible. Simply add the closeOnContentClick: true, JS option in the modal: function() Function Block to the $.magnificPopup.open Initialization Code.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.