0

私のサイトのユーザーに警告メッセージがあります：

alert("Message to users");

このメッセージは、テンプレートを継承するすべてのページに表示されます。

ユーザーがjavascriptを使用して追加のアラートメッセージを停止するためのオプションを作成したいと思います。私が念頭に置いているのは、メッセージの下にあるチェックボックスで、追加のメッセージを停止することです。

4

2 に答える 2

0

Firefoxには、この機能がブラウザに組み込まれています。これがあなたが複製しようとしている機能だと思いますか？

ここには2つの異なる質問があります。アラートボックスを作成する方法、または設定を保存する方法を尋ねていますか？

アラートボックスの作成方法を尋ねている場合は、次の2つの方法があります。

  1. そのオプションを使用して、独自のカスタムアラートボックスを作成します。
  2. アラートの代わりに確認ボックスを使用してください。

オプション1：@dystroyがjQueryを使用してこれを行う方法の例を提供しているようです。

オプション2：[OK]/[キャンセル]ボタンが表示されます。メッセージを次のように設定できます。

「ユーザーへのメッセージ」


これらのポップアップを今後防止しますか？

OKキャンセル

また、[OK]をクリックした場合は、ポップアップが再度発生しないように、何らかの方法で設定を保存します。

または、ユーザーがデフォルトでポップアップを防止せずに[OK]をクリックできるようにする場合は、メッセージを「キャンセルを押して今後これらのポップアップを防止する」などに変更できます。

この設定をページの読み込み間で保持する場合は、データベース、Cookie、セッション変数などに保存する必要があります。

コードは次のようになります。

if (/* check the setting to see if we should display a message */)
{
    var r = confirm("Message to users\n\nPress Cancel to prevent these popups in the future");
    if (!r)
    {
        // do something to store this setting
    }
}
于 2012-08-24T16:40:16.463 に答える
0

これがデモです：http：//jsfiddle.net/jR8hk/

それを実行するか、ページをリロードするたびに、1秒後にアラートが表示されます。

ただし、チェックボックスをオンにすると、アラートは二度と表示されなくなります。コメントで提案したように、localStorageを使用してローカルコンピューターに設定を設定することで機能します。

ここにその部分があります：

HTML：

<div id=alert>
    THIS IS A MESSAGE !
    <br><br><input type=checkbox id=alert_cb> SHUT UP
    <br><input type=button id=alert_close value = close>
</div>
<p>
    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal content    <br>normal conten    <br>normal contenttttttttttt
</p>

CSS：

#alert {
    display:none;
    background-color: red;
    z-index:2;
    position: fixed;
    left: 40px;
    right: 40px;
    top: 40px;
    height: 100px;
}​

JavaScript：

setTimeout(function(){
    if (!localStorage['stop_please']) $('#alert').show('slow'); 
}, 1000);


$('#alert_close').click(function(){
    if ($('#alert_cb').is(':checked')) localStorage['stop_please'] = "pleeeeaaaaase";
    $('#alert').hide();
});​

十分でない場合は、cssを適応させることをお勧めします。

于 2012-08-24T16:50:56.493 に答える