Modals and popups
Rerum voluptatem et voluptatem expedita minima quis illum cum sit ut magni voluptatem et. quo non blanditiis ut et modi aut optio nesciunt. voluptatem similique occaecati rerum minus sit id omnis et. aut odio et aliquam provident unde nihil tempora non reprehenderit voluptatem accusamus quam recusandae. cupiditate omnis doloremque sed omnis cupiditate totam numquam et debitis quia. laudantium est voluptas deleniti ut et eos ratione assumenda dolore quia ut non. id maiores soluta molestias nam laudantium fugit
Iusto sed quia voluptate nostrum odit. quod odio labore velit consequatur nemo et laborum unde. maxime et qui magni facilis omnis et facere sed ut. est nobis fugit occaecati. quo autem dolorem expedita rerum accusamus vero. aperiam et quae aut est nobis corporis expedita ut eveniet
Modal using jQuery
// Example modal using jQuery and magnificPopup.
// See http://dimsemenov.com/plugins/magnific-popup/ for documentation.
// See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role
// for notes on accessibility.
// #example-modal1 is the trigger in this case
// (the Click me! button)
$('#example-modal1').magnificPopup({
items: {
// In this example, we've directly embedded the modal content.
// It could also be brought in from an existing element or via AJAX.
// We'll use the brick--heavy styling.
// The key piece of markup to add for a modal is the trigger to close it,
// in this case a link with the class "modal-dismiss".
// A listener will be added to it when the modal is opened. Clicking on
// the trigger will then call magnificPopup.close().
src: '<div class="brick brick--heavy brick--modal" role="dialog" aria-labelledby="example-modal1-title">\
<div class="brick__wrapper">\
<h2 class="brick__title" id="example-modal1-title">Example modal title</h2>\
<p>Example modal popup content.</p>\
<div class="modal__actions">\
<a href="#" class="button modal-dismiss button--small button--secondary" role="button">Close</a>\
</div>\
</div>\
</div>',
type: 'inline'
},
modal: true,
// Delay and class are both required for animation effect.
removalDelay: 300,
mainClass: 'modal--fade'
});
Click me!
<!-- Normal button start -->
<a href="../nojs.html" id="example-modal1" class="button modal-trigger" role="button">Click me!</a>
<!-- Normal button end -->