使用「不再顯示」選項在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中創建彈出窗口/警報窗口

回答

相關問題