javascript - クリックがモーダルダイアログの外で行われた場合、ユーザーが行ったすべてのクリックを無効にする方法

Question

私の現在のプロジェクトでは、ボタンのクリックで開くモーダルダイアログを開いています。ユーザーがモーダルダイアログの外側をクリックすると、ブラウザはクリックを無視し、モーダルダイアログにフォーカスを当てる必要があります。これをどのように達成できますか?

score 3 · Accepted Answer

モーダルダイアログを表示するときに背景へのクリックを無効にする標準的な方法は、(半) 透明な div (背景画像付き) を作成し、それを使用してすべてのクリックを傍受することです。

ダイアログは、この透明な div の上に配置されます。

jQuery のようなフレームワークがこれを行うので、js を正しく設定することを心配する必要はありません。

jQuery modal dialogを見てください。

score 1 · Accepted Answer

モーダルダイアログと関連するテクニックをチェックアウトします。ダイアログにjQueryUIを使用していると仮定すると、そのオプションが組み込まれています。そうでない場合は、その実装をチェックアウトできます。

score 0 · Accepted Answer

jqueryuiダイアログには、Modalという名前のプロパティがあります。trueに設定すると、ダイアログ Jquery UiDialogModalプロパティを除くすべてのコンテンツが無効になります。

または他の方法は

$("*:not('#dialog')").on("click",function(){
// do focusing on button or anything you want...
return false;
})

score 0 · Accepted Answer

onblur と呼ばれるドキュメントまたはウィンドウのイベントがあります。基本的に、ユーザーが他のウィンドウをクリックした場合にウィンドウのフォーカスをポップアップに戻す機能を設定する必要があります。

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

    <script>
function bringBackFocus()
{
window.focus();
}
</script>
    <body onBlur="bringBackFocus()">
    </body>

4 に答える 4