Pop Up

[Betto]

Hi
I would need a popup when loading my homepage with a single responsive image and a close button.. is it possible to do this with the modal element? Could you please tell me which code I would use? thank you very much and regards

Beto Gomes

---

[Support]

Hi, please check the script below to see how to open an image on page load:

js/custom.js

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
            items: {
                src: 'someimage.jpg'
            },
            type: 'image'
        }, 0);
    });
})(jQuery);

Let me know if you need further assistance.

Best Regards,

Okler Themes

---

[Betto]

Hi
I wrote the code in the js.custom page and it didn’t work. I tried as a script at the end of the page that I need the popup to open and it didn’t work either. Is there any extra code for the html page?
thanks

Beto Gomes

---

[Support]

Hello, you can also open a lightbox with only an IMG for the content, example:

1) The POPUP HTML you put right after opening the BODY tag or at the bottom before closing it.

<div id="test-modal" class="white-popup-block p-0 mfp-hide">
	<img src="https://placehold.co/600x400" class="img-fluid" />
</div>

2) JS (js/custom.js)

$(function () {
	$('.popup-modal').magnificPopup({
		type: 'inline',
		preloader: false
	});
});

$(document).ready(function () {
	if ($('#test-modal').length) {
		$.magnificPopup.open({
			items: {
				src: '#test-modal' 
			},
			type: 'inline'
	  });
	}
});

Kind Regards.

---

[Betto]

Hi!
Thanks.. it really worked now. What if I wanted to put the Default Modal that is on the elements-modals page? It would be possible? thanks!
Regards

Beto Gomes

---

[Support]

Hi, yes,

HTML:

<button class="d-none" data-bs-toggle="modal" data-bs-target="#defaultModal" id="openModal">
	Launch Default Modal
</button>

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

JS:

$(window).on('load', function(){
    var delay = 300; // Time in mili-seconds

    setTimeout(function(){
        $('#openModal').trigger('click');
    }, delay);
});

---

[Betto]

Hi
I followed the instructions inserting the html code in the body and the js code in the custom.js page, but the pop up didn’t appear when the page was loaded.. could you tell me what I did wrong?

thanks!

Beto Gomes

---

[Support]

Hello, can you please send me the url of your site so I can check? I tested that code in the latest version of Porto and it worked well.

Kind Regards.

---

[Betto]

Hi

I don’t know what version it is but it’s not up to date.
In my Theme.js sheet there is this information:

Name: Theme Base
Written by: Okler Themes – (http://www.okler.net)
Theme Version: 8.3.0

Thanks

---

[Support]

Hello, on version 8.3.0 it’s basically the same:

HTML:

<button class="btn btn-modern btn-primary d-none" data-toggle="modal" id="openModalLink" data-target="#defaultModal">
	Launch Default Modal
</button>

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

JS:

$(window).on('load', function(){
    var delay = 300; // Time in mili-seconds

    setTimeout(function(){
        $('#openModalLink').trigger('click');
    }, delay);
});

Result:

---

[Betto]

Hi

worked perfectly ! thank you very much!!!

Beto Gomes

---

[Author]

Posts