2

私は JavaScript と jQuery の初心者であり、基本的なダイアログ ボックスを機能させるのに苦労しています。これが私のコードです：

<script type="text/javascript">
    $(document).ready(function() {
        var dialog = $("#dialog");

        dialog.dialog({
            title: "Dialog",
            modal: true,
            draggable: false,
            resizable: false,
            autoOpen: false,
            width: 500,
            height: 400
        });

        dialog.hide();
    });

    function showDialog() {
        $("#dialog").dialog("open");
    }


    $("ui-widget-overlay").click(function() {
        $(".ui-dialog-titlebar-close").trigger("click");
    });
</script>

<div id="dialog">
    Dialog text.
</div>

<button onclick="showDialog()">Show Dialog</button>

ボタンをクリックすると、ダイアログのタイトル バーが表示され、ページの背景が暗くなりますが、2 つの問題があります。

  1. ダイアログの本文が表示されない (表示されるのはタイトル バーのみ)
  2. ダイアログの外側をクリックすると、ダイアログが閉じません。ダイアログを閉じるには、隅にある「x」をクリックする必要があります。

ここで関連する質問をたくさん読んでいますが、私が試したものは何もうまくいかないようです。何かアドバイス？

4

4 に答える 4

1

モーダル ダイアログを使用し、オーバーレイをクリックしたときにダイアログを閉じるだけです。また、このためにコードを挿入する必要はありません$(document).ready。

function showDialog() {
    var dialog = $("#dialog");

    dialog.dialog({
        title: "Dialog",
        modal: true,
        open: function () { 
            $('.ui-widget-overlay').bind('click', function () {
                dialog.dialog('close'); 
            });
        }
    });
}

デモンストレーション

于 2012-12-21T18:35:02.170 に答える
0

マークアップを変更し、マークアップのインラインイベントハンドラーを削除し、ボタンを使用し、ダイアログ変数を使用するため、これを別の回答として追加しています（あなたとは異なりますが...

<div id="dialog">
    Dialog text.
</div>

<button id="showDialog">Show Dialog</button>

およびそのマークアップのコード:

$(document).ready(function() {
    var dialog = $("#dialog");
    dialog.dialog({
        title: "Dialog",
        modal: true,
        draggable: false,
        resizable: false,
        autoOpen: false,
        width: 500,
        height: 400
    });
    $('#showDialog').click(function() {
        dialog.dialog("open");
    });
    $(document).on('click', ".ui-widget-overlay", function() {
        dialog.dialog("close");
    });
});
于 2012-12-21T18:51:11.817 に答える
0

私はあなたを見ます：

$("ui-widget-overlay").click(

おそらくクラスを選択する必要があります：

$(".ui-widget-overlay").click(

これは存在しないため発生しないため、ドキュメントにフックする必要があります。

dialog.hide();ダイアログになると自動的に非表示になるため、は必要ありません

だからあなたが持っている必要があります：

  $(document).on('click',".ui-widget-overlay", function() {
        $(".ui-dialog-titlebar-close").trigger("click");
  });

より簡単に:(他にダイアログがない場合は、この方法で処理する必要があります)

$(document).on('click',".ui-widget-overlay", function() {
   $("#dialog").dialog("close");
});

完全に作り直されたコードを表示するサンプル フィドル: http://jsfiddle.net/GrFE3/2/

于 2012-12-21T18:29:31.157 に答える