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

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

Это код.

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

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

Можете вы, пожалуйста, помогите!

Спасибо

Chris Porter
Редактировал вопрос 21-го февраля 2011 в 5:50
Программирование
javascript jquery dialog
14-го декабря 2008 в 4:34
34 просмотров

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

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




<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)
Решение

Похоже, есть проблема с код, который вы выложили. Ваша функция для отображения Т&С ссылается на неправильное див ИД. Вы должны назначить функцию showTOC в атрибут onclick, как только документ будет загружен, а также:

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

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

Более конкретный пример, который принесет желаемого эффекта, используя диалоговое окно с jQuery пользовательского интерфейса:

   <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 & Conditions</a>      
   <script type="text/javascript">
       $(document).ready(function(){
           $('#showTerms').click(function(){
               $('#terms').dialog({modal:true});   
           });
       });
   </script>
carlsz
Редактировал ответ 14-го декабря 2008 в 5:29
Комментарии (5)

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

В моей $(документ).готова событие я инициализирую мой диалог с 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 и работает нормально. Надеюсь, что это помогает!

Niyaz
Редактировал ответ 15-го августа 2009 в 1:58
Комментарии (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;
    }
Комментарии (0)

RaeLehman'ы решение работает, если вы только хотите создать диалог's раз содержимое (или только изменить его с помощью JavaScript). Если вы действительно хотите, чтобы восстановить диалог каждый раз (например, с помощью модели представления класса и бритвы), то вы можете закрыть все диалоговые окна с $(" по.в UI-диалог-заголовок-близко и").нажмите кнопку(); и оставить autoOpen установлено в значение по умолчанию true.

Комментарии (0)
<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>
Awais Qarni
Редактировал ответ 29-го июля 2011 в 8:10
Комментарии (0)

если вы хотите изменить непрозрачность для всех диалоговых то изменить в jQuery-интерфейс.УСБ

/* 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)

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

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

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

    return false;
});
Комментарии (0)

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

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

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