htmlでポップアップ/アラートウィンドウを「表示しない」オプションを使用して作成する

ポップアップ/アラートウィンドウを作成して、ページがロードされているときにポップアップが開くようにしようとしています。私は周りを検索し、私が好きなものを見つけましたが、このオプションを何度もユーザーにポップアップを表示しないようにする方法はわかりません（「これをもう一度表示しない」オプション付き）。私は、スクリプト部分で私のヘッダーにこれを追加htmlでポップアップ/アラートウィンドウを「表示しない」オプションを使用して作成する

：

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

を私はこのためにjQueryのスクリプトが必要であることを知っているので、私は私のHTMLページに

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

を追加しました。これは正常に動作していますが、チェックボックスやボタンを "これを再度表示しない"にするためのアラートの変更方法はわかりません。

アラートが外部のポップアップ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アイテムが設定されているかどうかをチェックする条件を作成する必要があります。そうでない場合は、モーダルを表示し、それがある場合は、モーダルを隠す：

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

：モーダル自身で

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

、あなたはのlocalStorageに関連する付加価値を「いいえ」のボタンを持っていないだろう

私はこのhereを示す実例を作成しました。このことができます

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

希望：

この方法では、すべてのコードは、しかし、あなたはまだ、外部のjQuery UIのJavaScript、およびオプションのCSSを含める必要がありますことを覚えておいてください、単一のファイル内に存在することができ！ :)

出典

2017-04-06 22:32:26

ありがとう、ありがとう。私はラッパーとマップの種類の様々なが含まれているページにこれを追加する少し問題がある、どのように私はこのボックスは、そのページのすべての層の上に表示させることができますか？ – xLeevo

あなたは 'z-index'を使う必要があります。ポップアップに高いz-indexを与えて、常に他のすべての要素の上に置くようにしてください:) –

htmlでポップアップ/アラートウィンドウを「表示しない」オプションを使用して作成する

答えて

関連する問題