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

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

Это код.

JavaScript:

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

HTML (ссылка):

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

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

Я думаю, что проблема в том, что когда вы закрываете диалоговое окно, DIV уничтожается из HTML-кода, поэтому он никогда больше не будет отображаться на экране.

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

Спасибо

14.12.2008 16:34:13
10 ОТВЕТОВ
РЕШЕНИЕ

Похоже, есть проблема с кодом, который вы опубликовали. Ваша функция для отображения 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>
25
14.12.2008 17:29:55
Я согласен на 100% с вами. Я думаю, что есть разные способы отображения оглавления на одной странице. Проблема в том, что все оглавления отображаются, потому что они находятся в выражении DIV. Есть ли способ, как отобразить DIV, только когда кто-то нажимает на кнопку ссылки?
David Bonnici 14.12.2008 17:09:58
Смотрите второй пример, который я только что добавил.
carlsz 14.12.2008 17:30:30
Я попробовал это (скопировал и вставил ваш код, но в диалоговом окне не отображается «LOREM ...» и 2. После нажатия на ссылку появляется диалоговое окно, затем, когда я нажимаю кнопку закрытия, а затем снова нажимаю на ссылка, чтобы снова увидеть оглавления, диалоговое окно не появляется ... Не могли бы вы помочь мне :(?
David Bonnici 14.12.2008 17:46:07
Удалить стиль = "display: none;" атрибут.
carlsz 14.12.2008 18:11:27

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

Команда $ ('# myDiv'). Dialog () создает / создает экземпляр диалога, но не обязательно является правильным способом его открытия . Правильный способ открыть его - создать диалоговое окно с помощью 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>
64
6.01.2009 15:12:27
Помогло мне, моя проблема заключалась в том, что я создавал диалог внутри моего обработчика click (), поэтому он не был доступен для открытия в другом месте кода.
David Yell 17.02.2011 10:50:13

У меня была та же проблема, и я искал способ ее решить, что привело меня сюда. После рассмотрения предложения, сделанного 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();
    });
});

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

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

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

14
15.08.2009 01:58:12

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

 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
14.01.2010 19:02:12
<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
29.07.2011 08:10:24

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

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

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

    return false;
});
0
9.04.2010 00:03:46

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

1
28.03.2011 21:00:11

Мое решение: удалить некоторые параметры инициализации (например, 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
23.06.2012 09:59:04

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

    $("#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
22.08.2012 08:34:27

если вы хотите изменить непрозрачность для всего диалога, то измените в 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
3.11.2012 12:47:44