I found some ways to make javascript/jquery popup windows. But, there were some problems, first of all, I am not very good with these two languages, just beginner.
If there is any ready code, for opening POPUP window on website load, but only once per browser session. It would be very nice, if someone could help me with this.
I need simple popup, with just some text in it, but design for popup box something good looking, not like original browser popup (like in image), of course, with closing button.
http://i.stack.imgur.com/xNWxf.png
Thanks a lot
The code to show only one time the popup (Bootstrap Modal in the case) : $ (document).ready (function () { if (Cookies ('pop') == null) { $ ('#ModalIdName').modal ('show'); Cookies ('pop', '365'); } }); Add the script above to your js repo (in Rails : app/javascript/packs)
As more and more people use the Popups for Divi plugin, there also is demand for advanced features. One of the most requested features is a way, to display a popup only once per day/week/month, like here:
How To Create Popups 1 Step 1) Add HTML:#N#Example#N#<div class="popup" onclick="myFunction ()"> Click me!#N#<span class="popuptext" id="myPopup">... 2 Step 2) Add CSS:#N#Example#N#/ 3 Popup container 4 /#N#.popup {#N#position: relative;#N#display: inline-block;#N#cursor: pointer;#N#}#N#/ 5 ... 6 Step 3) Add JavaScript: More ...
Every Popup and Fly-In Area can define a “Keep Closed” behavior. Here you can choose whether to keep the Popup or Fly-In closed for a few minutes, hours, days, or weeks: Area Behavior box in Divi Areas Pro. As you see, it’s rather simple to create advanced display conditions for your popups by using a Code-Module and the DiviArea JS API.
I know I shouldn't really do this and provide you with the answer without you trying to attempt it first because you won't be learning that way.
But I'm feeling nice today, so I'm providing you of a way of doing a pop up on first load and not loading the pop again until the session been destroyed.
You need to set the session, when you load the page by doing the following:
sessionStorage.setItem('firstVisit', '1');
Then you just need to check for the session like this:
If there is no session called firstVisit
then show message box
if (!sessionStorage.getItem('firstVisit') === "1")
{
$(".message").show();
}
EXAMPLE
HTML
<div class="message">
<div class="message_pad">
<div id="message"></div>
<div class="message_leave">
</div>
</div>
</div>
JavaScript/JQuery
// Save data to sessionStorage
sessionStorage.setItem('firstVisit', '1');
/* Fix size on document ready.*/
$(function()
{
if (!sessionStorage.getItem('firstVisit') === "1")
{
$(".message").show();
}
//Close element.
$(".message").click(function()
{
$(this).hide();
});
$(".message").css({
'height': $(document).height()+'px'
});
$(".message_pad").css({
'left': ($(document).width()/2 - 500/2)+'px'
});
});
/*
* Fix size on resize.
*/
$(window).resize(function(){
$(".message").css({
'height': $(document).height()+'px'
});
$(".message_pad").css({
'left': ($(document).width()/2 - 500/2)+'px'
});
});
JSFIDDLE
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With