我正在尝试制作一个弹出/警报窗口，以便在加载页面时打开弹出窗口。我四处搜索，找到了我喜欢的东西，但我不知道如何让这个选项能够不向用户多次显示弹出窗口（使用“不再显示”选项）。
我将此添加到脚本部分的标题中：
$(document).ready(function(){ alert('hi')});
我知道我需要 jQuery 脚本，所以我添加了
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
到我的 HTML 页面。这工作正常，但我不知道如何修改我的警报以制作带有“不再显示”的复选框或按钮。
我还找到了一个解决方案，其中警报是一个外部弹出 HTML 页面，但我希望它在我的 HTML 页面中。有没有办法解决我的问题，或者解决警报的方法更好？
【问题讨论】：
标签： javascript html popup
很遗憾，您无法通过典型的 JavaScript 警报框执行此操作。您需要构建自己的模式弹出窗口来模拟警报框。 jQuery 的插件jQuery UI 有一个非常好的内置函数，我将在我的示例中使用它。
要让用户选择不再显示窗口，您需要使用localStorage。您需要创建一个条件来检查是否设置了 localStorage 项目。如果不是，显示模态，如果是，隐藏模态：
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
在模式本身中，您将有一个“否”按钮，用于将相关值添加到 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");
});
我创建了一个展示此here 的工作示例。
这样，您的所有代码都可以驻留在一个单个文件中，但请记住，您仍然需要包含外部 jQuery UI JavaScript 和可选的 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>
希望这会有所帮助！ :)
【讨论】：
z-index。为弹出窗口提供高 z-index 以确保它始终位于所有其他元素之上:)
在下面的示例中，每个弹出窗口都有一个“不再显示”按钮。
主文档：
代码：
<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>
弹出文件位于名为 1 的文件夹中
pop1.html:
代码：
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
代码：
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>
【讨论】：