使用“不再显示”选项在HTML中创建弹出窗口/警报窗口

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

我在脚本中添加部分这我的头：

$(document).ready(function(){ alert('hi')});

我知道，我需要为这个jQuery的脚本，所以我加了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

到我的HTML页面。这工作正常，但我不知道如何修改我的警报，使用“不再显示此项”复选框或按钮。

我还发现了一个解决方案，其中alert是一个外部弹出式HTML页面，但我希望它在我的HTML页面中。有没有办法来解决我的问题，或者更好地解决问题的方法？

来源

2017-04-06 xLeevo

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

主文档：

代码：

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

来源

2017-04-06 22:31:32 Rab

请看我的最后一句话:) – xLeevo

哦，没有看到 – Rab

不幸的是，你无法通过一个典型的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>

希望这有助于！ :)

来源

2017-04-06 22:32:26

非常感谢。我有一个小问题，将其添加到包含各种包装和类型地图的页面中，我如何决定让此框出现在该页面的每一层？ – xLeevo

你需要使用'z-index'。给弹出一个高z-索引，以确保它始终停留在每个其他元素的顶部:) –

使用“不再显示”选项在HTML中创建弹出窗口/警报窗口

回答

相关问题