4

jQuery UI ダイアログ ボックスを使用しています。

ボタンをクリックすると、ダイアログ ボックスが開きます。ダイアログ ボックスを開くと、ボディ全体が無効な状態になっている必要があります。ポップアップを使用している場合のように。そのために、以下のコードを使用しました。

ここにJsフィドルリンクがあります

<!doctype html>

<html lang="en">
<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(e) {
    $("#popup").click(function(){
        $( "#dialog" ).dialog();
        $( ".parentDisable" ).show();
    });

    $(".parentDisable").click(function(){
        $( "#dialog" ).dialog('close');
        $( ".parentDisable" ).fadeOut(1000);
    });

    $(".ui-button-icon-primary").click(function(){
        $( "#dialog" ).dialog('close');
        $( ".parentDisable" ).fadeOut(1000);
    });

});
</script>
<style>
    .parentDisable{
    position:fixed;
    top:0;
    left:0;
    background:#000;
    opacity:0.8;
    z-index:1;
    height:100%;
    width:100%;}
</style>
</head>
<body>

<div id="dialog" title="Basic dialog" style="display:none;">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<div class="parentDisable" style="display:none;"></div>


<span id="popup" style="color:blue;cursor:pointer">Pop Up</span>


</body>
</html>

ここで問題があります。ボタンをクリックするとポップアップが開き、全身が黒い背景で覆われます。

これで、ユーザーは 2 つのタイプで閉じることができるはずです。

  1. ポップアップの閉じる記号をクリックします。
  2. ポップアップの外側の領域をクリックする (On Black Background)

上記の2番目の方法は正常に機能しています。しかし、閉じる記号をクリックしている最初の方法では、ポップアップのみが近づき、黒い背景は変わりません。

私はいくつかの方法で試しました。しかし、それはうまくいきませんでした。
提案があれば教えてください。

4

4 に答える 4

6

closeダイアログのイベントにサブスクライブして、背景を非表示にすることができます。

$( "#dialog" ).on( "dialogclose", function( event, ui ) { 
    $( ".parentDisable" ).fadeOut(1000); 
});

http://jsfiddle.net/nRQXA/3/

アップデート

このような機能は、ダイアログ コンポーネントに既に存在します。

  $( "#dialog" ).dialog(
    { 
       modal: true 
  });

http://jsfiddle.net/nRQXA/23/

于 2013-09-12T07:07:47.470 に答える
2

この方法でクリック イベントを登録します。

 $(document).on('click','.ui-button-icon-primary',function(){
        $( "#dialog" ).dialog('close');
        $( ".parentDisable" ).fadeOut(1000);
    });

働くフィドル

于 2013-09-12T07:17:15.277 に答える
1

close イベントでダイアログを登録する

$("#dialog").dialog({
         autoOpen: false,
         close: function (event, ui) {
             $(".parentDisable").fadeOut(1000);
         }
     });

open コマンドで開く

 $("#dialog").dialog('open');

更新されたフィドルをチェックしてください

于 2013-09-12T07:10:58.607 に答える
0 
  $("#dialog").dialog({
            buttons: { "Ok": function() {  $(this).dialog("close");}}
            });
于 2013-09-12T07:07:36.283 に答える