Javascript 在html中创建一个带有“"；“不要再出现了”；选项

我正在尝试创建一个弹出/警报窗口，以便在加载页面时，弹出窗口将打开。我四处搜索，找到了我喜欢的东西，但我不知道如何让这个选项能够不向用户多次显示弹出窗口（使用“不再显示”选项）

我在脚本部分的标题中添加了以下内容：

$(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页面中。有没有办法解决我的问题，或者解决警报的办法更好？

在下面的示例中，每个弹出窗口都有一个“不再显示此内容”按钮

主要文件：

代码：

var expDate=新日期（）；
expDate.setTime（expDate.getTime（）+365*24*60*60*1000）；//一年
函数setCookie（isName、isValue、dExpires）{
document.cookie=isName+“=”+isValue+“expires=“+dExpires.togmString（）；
}
函数getCookie（isName）{
cookieStr=document.cookie；
startSlice=cookieStr.indexOf（isName+“=”）；
如果（startSlice==-1）{返回false}
endSlice=cookieStr.indexOf（“；”，startSlice+1）
如果（endSlice==-1）{endSlice=cookieStr.length}
isData=cookieStr.子字符串（起始片、结束片）
isValue=isData.substring（isData.indexOf（“=”）+1，isData.length）；
返回值；
}
函数initPopups（）{
如果（！getCookie（'pop1'））
{popWin1=window.open（“1/pop1.html”，“宽度=200，高度=150，顶部=50，左侧=400”）}
如果（！getCookie（'pop2'））
{popWin2=window.open（“1/pop2.html”，“宽度=200，高度=150，顶部=50，左侧=180”）}
}
window.onload=initPopups；

弹出文件位于名为1的文件夹中

pop1.html：

代码：

pop2.html：

代码：

---

不幸的是，您不能通过典型的JavaScript警报框来实现这一点。您需要构建自己的模式弹出窗口来模拟警报框。jQuery的插件有一个非常好的内置函数，我将在我的示例中使用它

要让用户选择不再显示窗口，您需要使用。您需要创建一个条件来检查是否设置了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");
});

是否要再次显示此对话框

对
不
$（“.yes”）。在（“单击”，函数（）{
$（“对话框”）。对话框（“关闭”）；
});
$（“.no”）。在（“单击”，函数（）{
setItem（'hideAlert'，true）；
$（“对话框”）。对话框（“关闭”）；
});

我创建了一个工作示例来展示这一点

通过这种方式，您的所有代码都可以驻留在一个文件中，不过请记住，您仍然需要包含外部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索引，以确保它始终位于每个其他元素的顶部：）

if (!localStorage.hideAlert) {
  $(function() {
    $("#dialog").dialog();
  });
}
else {
  $("#dialog").css("display", "none");
}

<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");
});

<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>