You can create 3 variations of Magnific Popups by adding one of this custom classes:
Magnific Popup custom classes:
1. mfp-ajax – ajax popup
2. mfp-image – image-popup
3. mfp-video – video popup
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="container ct-party-detailed__container"> <div class="ct-party-detailed ct-party-detailed--popup"> <div class="row"> <div class="col-md-6"> <div class="ct-party-detailed__media"> <div class="ct-party-detailed__time"> <div class="ct-party-detailed__number">90</div> <div class="ct-party-detailed__minutes">minutes</div> </div> <img src="assets/images/demo-content/party-01.jpg" alt="Outdoor Party With Costumes For Kids Between 7-12" /> </div> </div> <div class="col-md-6"> <div class="ct-party-detailed__body"> <h4 class="ct-party-detailed__title">Outdoor Party With Costumes For Kids Between 7-12</h4> <div class="ct-party-detailed__price">$190</div> <div class="ct-party-detailed__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div><a href="#" class="btn btn-motive">See Package</a> </div> </div> </div> </div> </div> |
Screenshot
Popup
Magnific Popup Documentation can be found here.
Files are bundled inside confetti.min.js & style.css
* This Block show only the way how to create the Popup element. To make it work you need also to create the sctructure that will activate it. The Popup above was created for the Party Box.