12

ユーザーがウィンドウを閉じるまで、2 つの jquery モーダル ダイアログで背景をブロックしようとしています。これを達成する方法について何か考えはありますか？

「背景をブロックする」とは、ページ上の他の要素を無効にする (つまり、他の要素をクリックできないようにする) ことを意味します。

以下は私のコードです：

            // sign up dialog
        $( "#aboutus_dialog" ).dialog({
            autoOpen: false,
            show: "fadein",
            hide: "fadeout"
        });

        // sign up dialog
        $( "#signup_dialog" ).dialog({
            autoOpen: false,
            show: "fadein",
            hide: "fadeout"
        });     

        // about us modal
        $('#aboutus').click(function() { 
            modal: true,
            $("#aboutus_dialog").dialog("open");
            return false;
        });

        // about us modal
        $('#signup').click(function() { 
            $("#signup_dialog").dialog("open");
            return false;
        });
    });
4

4 に答える 4

9

これはあなたが探しているものですか

http://jqueryui.com/demos/dialog/#modal

ソース表示ボタンがある背景をブロックします。オーバーレイはありますか？

手動で設定してみてください（推奨されませんが、cssを介して）：

$(".ui-widget-overlay").attr('style','background-color: #000; opacity:1; z-index:1000;');

もちろん、モーダルオプションをtrueに設定します。

色が強すぎる場合は、それに応じて不透明度を下げます。

于 2012-06-25T22:17:57.273 に答える
4

モーダル値を「true」に変更すると（angular jsで）、すべての背景要素が無効になりました.ここに私のコードが添付されています：

    var options = {
                    autoOpen : false,
                    modal : true,
                    close : function(event, ui) {
                        console.log("Predefined close");
                    }
                 };

    dialogService.open("myDialog" + k, "dialogTemplateload.html", model, options)
    .then(
            function(result) {
                console.log("Close");
                console.log(result);
            },
            function(error) {
                console.log("Cancelled");
            }
        );
于 2015-10-16T08:08:54.310 に答える
1

APIのダイアログオプションを確認してください。かなりの数があります。modalこれは、マウスイベントをブロックするページ上にオーバーレイを設定することに加えて、にcloseOnEscape設定されている場合false、ユーザーがキーボードのEscキーを押してダイアログを閉じることができないため、ダイアログコントロールを直接操作する必要があるものもあります。

デモページhttp://jqueryui.com/demos/dialog/のタブに組み込まれている重要なAPIがあります

于 2012-06-25T22:38:30.547 に答える