javascript - jQuery ダイアログボックス

Question

jqueryでダイアログボックスを作ろうとしています。このダイアログボックスで、契約条件を設定します。問題は、ダイアログボックスが初めて表示されることです。

これがコードです。

JavaScript:

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

HTML (href):

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

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

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

助けてください！

ありがとう

score 65 · Accepted Answer

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

$（'＃myDiv'）。dialog（）コマンドはダイアログを作成/インスタンス化しますが、必ずしもダイアログを開くための適切な方法ではありません。それを開く適切な方法は、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>

score 25 · Accepted Answer

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

$(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>

score 15 · Accepted Answer

私は同じ問題を抱えていて、それを解決する方法を探していたので、ここに来ました。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 でテストしたところ、問題なく動作しました。お役に立てれば！

score 2 · Accepted Answer

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;
    }

score 1 · Accepted Answer

<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>

score 1 · Accepted Answer

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

score 0 · Accepted Answer

すべてのダイアログの不透明度を変更する場合は、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);
}

score 0 · Accepted Answer

私の解決策：何かが機能していない場合（スライド効果など）、コンストラクターが生成されないため、いくつかの初期化オプション（ショーなど）を削除します。動的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;
}

score 0 · Accepted Answer

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

    $("#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;
    });

score 0 · Accepted Answer

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

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

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

    return false;
});

javascript - jQuery ダイアログ ボックス

10 に答える 10

Related

Reference

javascript - jQuery ダイアログボックス