1

ダイアログの外側をクリックしたときにダイアログボックスを閉じたいのですが、jquery /plainjavascriptでどのようにテストするかわかりません。

ぼかしイベントの使用を提案する人もいますが、これはjqueryダイアログではサポートされていないようです。

編集私にもこの質問がありますが、ダイアログボックスをモーダルにすることができないため、現在提供されている回答のいずれにも対応できません。

これが必要なのは、ダイアログが一番上にあるときにのみキーハンドラーを登録し、別のダイアログが一番上に表示されたらすぐに登録を解除できるようにするためです。

誰かが解決策を持っていますか？理想的には、他のダイアログが一番上に来るたびにイベントが発生するという解決策がありますか？

4

8 に答える 8

10

純粋なjQueryUIモーダルダイアログはありません。

例：

http://jsfiddle.net/marcosfromero/x4GXy/

コード：

// Bind the click event to window
$(window).click(function(event) {
    if (($(event.target).closest('.ui-dialog')).length>0) {
        // if clicked on a dialog, do nothing
        return false;
    } else {
        // if clicked outside the dialog, close it
        // jQuery-UI dialog adds ui-dialog-content class to the dialog element.
        // with the following selector, we are sure that any visible dialog is closed.
        $('.ui-dialog-content:visible').dialog('close');

    }
})
于 2011-05-13T02:08:26.880 に答える
5

ダイアログをモーダルにすることはできますか？もしそうなら、あなたは（おそらく）モーダルオーバーレイ上のイベントによってあなたが求めているものを達成することができます...

完全にハッキーでテストされていないアイデアですが、うまくいくかもしれません...

モーダルダイアログは、click.dialog-overlayなどと呼ばれるイベントを作成します。これらは、マウスがダイアログの外側、モーダルオーバーレイ上でクリックされたときに発生します。それらのイベントをフックしてダイアログを閉じると、あなたがやろうとしていることを実行するかもしれません...

于 2009-05-25T03:22:08.360 に答える
1

ぼかしイベントは、あなたが探しているものではありません。ぼかしイベントは単一の要素で発生します。探しているのは、ユーザーが特定の要素グループ（特定の親ノードの下にあるすべて）をクリックしたときです。**そのためのイベントはないため、アクセスできるイベントを使用してシミュレートする必要があります。 。

$('.dialogSelector').dialog({
  open: function(e) { // on the open event
    // find the dialog element
    var dialogEl = $(this).parents('.ui-dialog')[0];        
    $(document).click(function (e) { // when anywhere in the doc is clicked
        var clickedOutside = true; // start searching assuming we clicked outside
        $(e.target).parents().andSelf().each(function () { // search parents and self
            // if the original dialog selector is the click's target or a parent of the target
            // we have not clicked outside the box
            if (this == dialogEl) {
                clickedOutside = false; // found
                return false; // stop searching
            }
        });
        if (clickedOutside) {
            $('a.ui-dialog-titlebar-close').click(); // close the dialog
            // unbind this listener, we're done with it
            $(document).unbind('click',arguments.callee); 
        }
    });     
  }
});

**より正確には、ユーザーが特定の表示されている要素のグループの外側をクリックしたときのイベントを探しています。絶対的に配置されたdivは、実際にはそれらの要素の1つの子要素であるのに、ユーザーには要素のグループの「外側」に見える場合があります。これはこれには完全には機能しませんが、目的には機能するはずです。

お役に立てば幸いです。:)

于 2009-05-30T15:06:08.207 に答える
1

モーダルウィンドウの実行に役立つ可能性のあるjqueryツールオーバーレイをご覧ください。それは過去に私を助けました。

クリックがモーダルウィンドウの外側にあるかどうかを確認するには、次のようにします。

echo '<div class="mybody">Body of the webpage';
echo '<div class="myoverlay">Body of overlay</div></div>';

jquery：

$(function() {
    $('body').click(function(e) {
        var inOverlay = false;
        $(e.target).parents().each(function(idx,parent) {
            if ('mybody' == parent.className) {
                inOverlay=true;
            }
        });
        if (!inOverlay) {
            alert('outside');
        }
    });
});

次に、モーダルウィンドウ内にキーボードチェックを追加できます。

$(".myoverlay").keydown(function(e) {
   // your specific keyboard handler
});
于 2011-05-11T11:27:46.063 に答える
1

@marcosfromeroの（ただしパフォーマンスが高い）と同様の解決策は$.contains、要素が別の要素内に存在するかどうかをテストするために使用することです。$.containsネイティブdocument.documentElement.compareDocumentPositionメソッドが存在する場合はそれを利用します。つまりevent.target、jQueryオブジェクトに変換する必要はなく、DOMにクエリを実行する.ui-dialog必要もありません。また、基盤となるロジックはDOMをトラバースする必要もありません（最新のブラウザーの場合）。 ）。

$(document).click(function(event) {
    if( !$.contains( dialog.dialog('widget')[0], event.target ) ){
        $(':ui-dialog').dialog('close');    
    }
});

ターゲット要素がウィジェットによって作成されたダイアログマークアップ（ダイアログのメソッドを呼び出すことによって取得された）とともに存在しない場合widget、ダイアログは閉じられます。

デモ： http： //jsfiddle.net/ehynds/auKAu/

于 2011-05-13T19:06:19.503 に答える
0

私はこれがそれをするかもしれないと思います：

$("element").blur(function(){
  /* Callback goes here */
  $("element").hide();
});
于 2009-05-25T00:12:59.770 に答える
0

.blur（）関数を使用してください...その素晴らしい：D

http://docs.jquery.com/Events/blur

于 2009-05-25T00:13:25.027 に答える
0

CSS {position：fixed; height：100％; width：100％; background：transparent; z-index：100}を使用して透明なオーバーレイを作成し、を使用します$('.overlay').click(function() {$('ui-dialog').remove();}。もちろん、<div class="overlay"></div>ダイアログの作成と同時に作成する必要があります。そして、ダイアログにはより高いz-indexが必要になります！

于 2011-05-12T22:59:26.833 に答える