Диалоговое окно jQuery

Я пытаюсь сделать диалоговое окно с jquery. В этом диалоговом окне Im будет иметь условия. Проблема в том, что диалоговое окно отображается только в FIRST TIME.

Это код.

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, поэтому он никогда больше не может отображаться на экране.

Не могли бы вы помочь?

Спасибо

ОТВЕТЫ

Ответ 1

Похоже, есть проблема с кодом, который вы опубликовали. Ваша функция отображения T & C ссылается на неправильный идентификатор div. Вы должны рассмотреть возможность назначения функции 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>

Ответ 2

Я столкнулся с одной и той же проблемой (диалог будет открыт только один раз, после закрытия, он не будет открываться снова) и попробовал решения, выше, которые не исправили мою проблему. Я вернулся к документам и понял, что у меня возникло фундаментальное непонимание того, как работает диалог.

Команда $('# myDiv'). dialog() создает/создает диалоговое окно, но не обязательно подходит для открывать. Правильный способ открыть его - создать диалоговое окно с диалогом(), затем использовать диалог ( "открыть" ) для его отображения и диалог ( "закрыть" ), чтобы закрыть/скрыть его. Это означает, что вы, вероятно, захотите установить для параметра 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>

Ответ 3

У меня была такая же проблема, и я искал способ ее решения, который привел меня сюда. После рассмотрения предложения, сделанного RaeLehman, это привело меня к решению. Здесь моя реализация.

В моем событии $(document).ready я инициализирую свое диалоговое окно с параметром autoOpen равным false. Я также решил связать событие click с элементом, как кнопка, которая откроет мой диалог.

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

Далее, я уверен, что функция определена, и именно там я реализую метод открытия диалога.

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

Кстати, я тестировал это в IE7 и Firefox, и он отлично работает. Надеюсь, это поможет!

Ответ 4

Если вам нужно использовать несколько диалоговых окон на одной странице и открыть, закрыть и снова открыть их, выполните следующие действия:

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

Ответ 5

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

Ответ 6

Решение RaeLehman работает, если вы хотите только создать диалоговое содержимое один раз (или изменить его только с помощью javascript). Если вы действительно хотите каждый раз обновлять диалог (например, используя класс модели представления и Razor), вы можете закрыть все диалоги с помощью $( ". Ui-dialog-titlebar-close" ). Click(); и оставить autoOpen установленным по умолчанию значением true.

Ответ 7

Это немного более кратким, а также позволяет иметь разные значения диалога и т.д., основанные на разных событиях кликов:

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

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

    return false;
});

Ответ 8

Мое решение: удалите некоторые параметры init (например, show), потому что конструктор не дает результата, если что-то не работает (ex slide effect). Моя функция без динамической вставки 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;
}

Ответ 9

Даже я столкнулся с подобными проблемами. Вот как я смог решить один и тот же

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

Ответ 10

если вы хотите изменить непрозрачность для всего диалогового окна, а затем измените в 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);
}