1

最近のバージョンの Google Chrome ブラウザでは、javascript の警告ダイアログと確認ダイアログがあまり表示されません。それらは表示時に音を立てず、画面の上部近くに配置され、白いためほとんどの Web サイトに簡単に溶け込みます。

これにより、ユーザーはアラートが存在することに気付かず、アラートが閉じられるまでブラウザーがフリーズするため、ユーザーはブラウザーがフリーズしたと簡単に考えることができます。

JavaScriptアラートをより目立たせる方法は何ですか?

4

1 に答える 1

3

1 つのオプションは、div オーバーレイを使用して独自のアラートを作成することです。ただし、ユーザーが確認ダイアログで [OK] または [キャンセル] を選択するまですべての実行を停止したい場合が多いため、確認ダイアログでこれを行うのはより困難です。

優れたオプションは次のとおりです。これにより、ブラウザの警告ダイアログと確認ダイアログを引き続き使用できます。

これらの関数を作成します (Jquery を使用しますが、Javascript に変更できます)。

function alrt(msg) {
    var tint = $('<div class="PopupBgTint"></div>');
    tint.appendTo('body');
    alert(msg);
    tint.remove();
}
function cnfrm(msg) {
    var tint = $('<div class="PopupBgTint"></div>');
    tint.appendTo('body');
    var rtrn = confirm(msg);
    tint.remove();
    return rtrn;
}

CSS ファイルで、PopupBgTint を次のように定義します。

.PopupBgTint
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index:99999;
}

次に、 or を呼び出す代わりにor
alert('Hello World')をconfirm('Continue?')
呼び出しますalrt('Hello World')cnfrm('Continue?')

それだけです。これにより、ページ全体を覆う一時的な着色オーバーレイが作成され、その上にアラート/確認ダイアログが表示され、ダイアログがより見やすくなります。

http://jsfiddle.net/wcU3f/1/の例を参照してください
(ただし、jsfiddle はフレームを使用するため、効果の一部が無効になりますが、完全な Web ページでどのように機能するかがわかります。)

于 2013-11-07T19:29:18.460 に答える