Popup Modal

by Michael Mandarino

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<a class="specialLink popup-viewregister" href="#t">Open modal</a>

<div id="test-modal" class="mfp-hide white-popup-block">
	<h1>Modal dialog</h1>
	<p>You won't be able to dismiss this by usual means (escape or
		click button), but you can close it programatically based on
		user choices or actions.</p>
	<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>

CSS

.white-popup-block {
    background: #FFF;
    padding: 20px 30px;
    text-align: left;
    max-width: 650px;
    margin: 40px auto;
    position: relative;
}

JavaScript

$(function() {
    $('.popup-viewregister').magnificPopup({
        type: 'inline',
        preloader: true,
        modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function(e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});