Make a Popup/Alert Window in a html with a “dont show again” option
Question
I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?
2 answers
solution1
0 2017-04-06 22:31:32
In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>
solution2
0 2017-04-06 22:32:26
Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage . You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here .
This way, all of your code can reside within a single file , though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.