web-dev-qa-db-ja.com

jQueryダイアログボックス

Jqueryでダイアログボックスを実行しようとしています。このダイアログボックスには、契約条件があります。問題は、ダイアログボックスが最初に表示されるだけであることです。

これがコードです。

JavaScript：

function showTOC()
{
    $("#TOC").dialog({ 
        modal: true, 
        overlay: { 
            opacity: 0.7, 
            background: "black" 
        } 
    })
}

HTML（a href）：

<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>

<div id="example" title="Terms & Conditions">1..2..</div>

問題は、ダイアログボックスを閉じると、DIVがHTMLコードから破棄されるため、画面に再び表示できないことです。

助けてください！

ありがとう

javascriptjquerydialog
35
David Bonnici

投稿したコードに問題があるようです。 T＆Cを表示する関数は、間違ったdiv idを参照しています。ドキュメントがロードされたら、showTOC関数をonclick属性に割り当てることを検討する必要があります。

$(document).ready({
    $('a.TOClink').click(function(){
        showTOC();
    });
});

function showTOC() {
    $('#example').dialog({modal:true});
}

JQuery UIダイアログを使用して望ましい効果を達成するより簡潔な例は次のとおりです。

   <div id="terms" style="display:none;">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
   <a id="showTerms" href="#">Show Terms &amp; Conditions</a>      
   <script type="text/javascript">
       $(document).ready(function(){
           $('#showTerms').click(function(){
               $('#terms').dialog({modal:true});   
           });
       });
   </script>
25
carlsz

同じ問題が発生し（ダイアログは一度しか開かず、閉じた後は再び開かない）、上記の解決策を試しても問題は解決しませんでした。私はドキュメントに戻り、ダイアログがどのように機能するかについて根本的な誤解があることに気付きました。

$（ '＃myDiv'）。dialog（）コマンドはダイアログを作成/インスタンス化しますが、open itへの適切な方法とは限りません。それを開く適切な方法は、dialog（）でダイアログをインスタンス化し、dialog（ 'open'）を使用してそれを表示し、dialog（ 'close'）を使用して閉じる/非表示にすることです。これは、おそらくautoOpenオプションをfalseに設定する必要があることを意味します。

したがって、プロセスは次のとおりです。準備ができたドキュメントでダイアログをインスタンス化し、クリックまたはダイアログに表示するアクションをリッスンします。その後、何度も動作します！

<script type="text/javascript"> 
        jQuery(document).ready( function(){       
            jQuery("#myButton").click( showDialog );

            //variable to reference window
            $myWindow = jQuery('#myDiv');

            //instantiate the dialog
            $myWindow.dialog({ height: 350,
                width: 400,
                modal: true,
                position: 'center',
                autoOpen:false,
                title:'Hello World',
                overlay: { opacity: 0.5, background: 'black'}
                });
            }

        );
    //function to show dialog   
    var showDialog = function() {
        //if the contents have been hidden with css, you need this
        $myWindow.show(); 
        //open the dialog
        $myWindow.dialog("open");
        }

    //function to close dialog, probably called by a button in the dialog
    var closeDialog = function() {
        $myWindow.dialog("close");
    }


</script>
</head>

<body>

<input id="myButton" name="myButton" value="Click Me" type="button" />
<div id="myDiv" style="display:none">
    <p>I am a modal dialog</p>
</div>
64
RaeLehman

私は同じ問題を抱えていて、それを解決する方法を探していました。 RaeLehmanからの提案を確認した後、解決策に導きました。これが私の実装です。

$（document）.readyイベントで、autoOpenをfalseに設定してダイアログを初期化します。また、ダイアログを開くボタンなどの要素にクリックイベントをバインドすることも選択しました。

$(document).ready(function(){

    // Initialize my dialog
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
        "OK":function() { // do something },
        "Cancel": function() { $(this).dialog("close"); }
    }
    });

    // Bind to the click event for my button and execute my function
    $("#x-button").click(function(){
        Foo.DoSomething();
    });
});

次に、関数が定義されていることを確認し、そこでダイアログのopenメソッドを実装します。

var Foo = {
    DoSomething: function(){
        $("#dialog").dialog("open");
    }
}

ちなみに、IE7とFirefoxでこれをテストしましたが、問題なく動作します。お役に立てれば！

14
Rickster

1つのページで複数のダイアログボックスを使用し、それらを開いて閉じて再度開く必要がある場合は、次の方法が適切に機能します。

 JS CODE:
    $(".sectionHelp").click(function(){
        $("#dialog_"+$(this).attr('id')).dialog({autoOpen: false});
        $("#dialog_"+$(this).attr('id')).dialog("open");
    });

 HTML: 
    <div class="dialog" id="dialog_help1" title="Dialog Title 1">
        <p>Dialog 1</p>
    </div>
    <div class="dialog" id="dialog_help2" title="Dialog Title 2">
        <p>Dialog 2 </p>
    </div>

    <a href="#" id="help1" class="sectionHelp"></a>
    <a href="#" id="help2" class="sectionHelp"></a>

 CSS:
    div.dialog{
      display:none;
    }
2
Jon

RaeLehmanのソリューションは、ダイアログのコンテンツを1回だけ生成する（またはjavascriptを使用してのみ変更する）場合に機能します。実際に毎回ダイアログを再生成する場合（たとえば、ビューモデルクラスとRazorを使用する場合）、$（ "。ui-dialog-titlebar-close"）。click（）;ですべてのダイアログを閉じることができます。 autoOpenをデフォルト値のtrueに設定したままにします。

1
Daniel
<script type="text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
    $('#dialog1').dialog({
        autoOpen: false,
        show: 'blind',
        hide: 'explode'
    });

    $('#Wizard1_txtEmailID').click(function() {
        $('#dialog1').dialog('open');
        return false;
    });
    $('#Wizard1_txtEmailID').click(function() {
        $('#dialog2').dialog('close');
        return false;
    });
    //mouseover
    $('#Wizard1_txtPassword').click(function() {
        $('#dialog1').dialog('close');
        return false;
    });

});



/////////////////////////////////////////////////////
 <div id="dialog1" title="Email ID">
                                                                                                                <p>
                                                                                                                    (Enter your Email ID here.)
                                                                                                                    <br />
                                                                                                                </p>
                                                                                             </div>
 ////////////////////////////////////////////////////////

<div id="dialog2" title="Password">
                                                                                                                <p>
                                                                                                                    (Enter your Passowrd here.)
                                                                                                                    <br />
                                                                                                                </p>
                                                                                              </div>
1
Upali

私の解決策：いくつかの初期化オプション（例：show）を削除します。これは、何かが機能していない場合（例：スライド効果）にコンストラクターが生成しないためです。動的なHTML挿入のない私の機能：

function ySearch(){ console.log('ysearch');
    $( "#aaa" ).dialog({autoOpen: true,closeOnEscape: true, dialogClass: "ysearch-dialog",modal: false,height: 510, width:860
    });
    $('#aaa').dialog("open");

    console.log($('#aaa').dialog("isOpen"));
    return false;
}
0
Michal - wereda-net

私も同じような問題に直面しました。これは私が同じことを解決できた方法です

    $("#lnkDetails").live('click', function (e) {

        //Create dynamic element after the element that raised the event. In my case a <a id="lnkDetails" href="/Attendance/Details/2012-07-01" />
        $(this).after('<div id=\"dialog-confirm\" />');

        //Optional : Load data from an external URL. The attr('href') is the href of the <a> tag.
        $('#dialog-confirm').load($(this).attr('href'));

        //Copied from jQueryUI site . Do we need this?
        $("#dialog:ui-dialog").dialog("destroy");

        //Transform the dynamic DOM element into a dialog
        $('#dialog-confirm').dialog({
            modal: true,
            title: 'Details'
        });

        //Prevent Bubbling up to other elements.
        return false;
    });
0
Vishnoo Rath

これはもう少し簡潔で、異なるクリックイベントに基づいて異なるダイアログ値などを持つことができます。

$('#click_link').live("click",function() {
    $("#popup").dialog({modal:true, width:500, height:800});

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

    return false;
});
0
djburdick

すべてのダイアログの不透明度を変更する場合は、jquery-ui.cssで変更します

/* Overlays */
.ui-widget-overlay
{
    background: #5c5c5c url(images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x;
    opacity: .50;
    filter: Alpha(Opacity=80);
}
0
Rikin Patel