Диалоговое окно jQuery - PullRequest
Новая
       47

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

35 голосов
/ 14 декабря 2008

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

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

Спасибо

Ответы [ 10 ]

64 голосов
/ 06 января 2009

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

Команда $ ('# 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>
25 голосов
/ 14 декабря 2008

Похоже, есть проблема с кодом, который вы опубликовали. Ваша функция для отображения 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>
14 голосов
/ 27 мая 2009

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

2 голосов
/ 14 января 2010

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

 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;
    }
1 голос
/ 29 марта 2011

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

1 голос
/ 02 апреля 2010 
<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>
0 голосов
/ 03 ноября 2012

, если вы хотите изменить непрозрачность для всех диалогов, тогда измените в 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 голосов
/ 22 августа 2012

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

    $("#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 голосов
/ 23 июня 2012

Мое решение: удалите некоторые параметры инициализации (например, 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 голосов
/ 09 апреля 2010

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

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

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

    return false;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...