Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Open content in popup without plugin

by | 20 Jun,2017 | DIVI, Tutorials, Webdesign

A new tutorial coming from a question on facebook group Divi Theme Tutorials.

The goal was to open a picture in a lightbox using a link. of course there are plugins to do that, but DIVI already use a lightbox system based on Magnific popup library.

Better than install a plugin, we are going to see how to use existing Magnific popup library to open a content inside a popup.

Quite simple, we just need to init our popup and tell what we want to show inside.

Here is an example of what we can achieve :

On click on the link “Show inline popup” our picture will open in a lightbox :

To get this result, we are going to use 3 modules inside DIVI builder.

    • First one will be a code module, containing popup init
    • Second one will be a text module containing the link
    • and the last one will be an image module containing the picture to open inside our popup

if we want, we can use only one code module, but it will be simpler to explain with this structure. In order to open something else than a picture, we can also use a text or code module instead of image module (for instance if we want to use a shortcode as content).

For my example, i have the following inside the builder :

Inside code module, i put the following :

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('.popup').click(function(e) {
			e.preventDefault();
			jQuery.magnificPopup.open({
				items: {src: jQuery(this).data('content-id')},
				type: 'inline'				
			});
		});
	});
</script>

This code targets click on HTML item using “popup” class and open HTML item with id provided inside “data-content-id”.

Inside text module, we create the link and we give the id of HTML item to call as content of popup :

<a class="popup" href="#" alt="" data-content-id="#thepop">Show inline popup</a>

Open slider in popup (click on this link)

We can use a picture to launch our popup, just by adding our media inside the a tag :

<a class="popup" href="#" alt="" data-content-id="#thepop"><img src="https://linktoyourimage" alt="yourimagealt"></a>

Our link uses “popup” class and then will call a popup on click. Called HTML item id is “thepop”.

last thing to do, define an HTML item with this id.

For this example, i use an image module given the css id of “thepop” and also css class “mfp-hide” (very important, as this class hides content before popup call

Inside CSS settings of image module, let’s add “thepop” id and “mfp-hide” class :

By default, popup is fullwidth, but you can style it like you want. here, i set the width to 1280px and changed the font size and color for closing button :

/* change container width */
.mfp-content {max-width:1280px;}

/* Font size and color for closing button (we set top:0; to avoid button from jumping upward on popup closing) */
.mfp-close-btn-in .mfp-close {
color: #fff;
font-size: 40px;
top:0;
}

By using a text or code module instead of image module, we are able to call a shortcode as content and obtain results like :

A slider inside a popup, or maybe :

a form inside a popup…

We can style our link to look like a button or even use a picture as a link.

If you want to use a button module to open content in a popup, you need to add the the class “popup-2” to your button module.

Next, put the id of target module inside the URL Field of your button module.

Then, use the following code snippet to open the content of module or section with given css id inside a popup from click on your button module :

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.popup-2').click(function(e) {
e.preventDefault();
jQuery.magnificPopup.open({
items: {src: jQuery(this).attr('href')},
type: 'inline'
});
});
});
</script>

You just have reached the end, see you soon for new tricks.

A propos du Brandy

A propos des boissons de l'été

A propos des fruits frais