JQuery UI диалог открыть несколько диалоговых окон, используя один и тот же класс на кнопке и div содержимого - PullRequest
Новая
       59

JQuery UI диалог открыть несколько диалоговых окон, используя один и тот же класс на кнопке и div содержимого

5 голосов
/ 23 декабря 2010

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

jQuery('.helpDialog').hide();

jQuery('.helpButton').click(function() {  
    jQuery(this).next('.helpDialog').dialog({  
    autoOpen: true,  
    title: 'Help',  
    width: 500,  
    height: 300,  
    position: [180,10],  
    draggable: true,    
    resizable: false,  
    modal: false  
    });  
return false;  
});

мы знаем причину этого http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ «второй вызов игнорируется, потому что диалог уже был создан для этого элемента».

Но когда я решу эту проблему, попробовав код ниже, диалоговое окно больше не открывается. Кто-нибудь может помочь? Заранее спасибо 

jQuery('.helpDialog').hide();

jQuery(function() {  
    jQuery('.helpDialog').dialog({  
        autoOpen: false,  
        modal: true,  
        title: 'Info',  
        width: 600,  
        height: 400,  
        position: [200,0],  
        draggable: false  
    });  
});  

jQuery('.helpButton').click(function() {  
    jQuery(this).next('.helpDialog').dialog('open');  
    return false;  
});

Ответы [ 3 ]

21 голосов
/ 23 декабря 2010

Вам на самом деле нужен другой подход, не интуитивный, например: 

jQuery(function($) {
  $('.helpButton').each(function() {  
    $.data(this, 'dialog', 
      $(this).next('.helpDialog').dialog({
        autoOpen: false,  
        modal: true,  
        title: 'Info',  
        width: 600,  
        height: 400,  
        position: [200,0],  
        draggable: false  
      })
    );  
  }).click(function() {  
      $.data(this, 'dialog').dialog('open');  
      return false;  
  });  
});

Вы можете проверить его здесь .

Почему вы должны это сделать? , потому что .dialog() перемещает содержимое, которое он заключает в элементы диалога, в конец <body>, поэтому .next() больше не будетнайдите его ... используя jQuery.data() мы поддерживаем ссылку на диалог, который мы хотим открыть.

2 голосов
/ 02 июля 2014

Может быть, этот код поможет вам. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" />

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("#opener1").click(function () {
            $("<div id='dialog1' />").dialog(
            {
                title: 'Basic modal dialog1',
                autoOpen: false,
                width: 600,
                height: 400,
                open: function (event, ui) {
                }
            });

            $("#dialog1").dialog('open').show();
            return false;
        });


        $("#opener2").click(function () {
            $("<div id='dialog2' />").dialog(
            {
                title: 'Basic modal dialog2',
                autoOpen: false,
                width: 600,
                height: 400,
                open: function (event, ui) {
                }
            });

            $("#dialog2").dialog('open').show();
            return false;
        });

    });
</script>

</head>
<body>
    <form id="form1" runat="server">
    <button id="opener1">open the dialog1</button>
    <button id="opener2">open the dialog2</button>

    </form>
</body>
</html>
0 голосов
/ 16 августа 2016 
jQuery(function($) {
$('.helpButton').each(function() {  
$.data(this, 'dialog', 
$(this).next('.helpDialog').dialog({
autoOpen: false,  
modal: true,  
title: 'Info',  
width: 600,  
height: 400,  
position: [200,0],  
draggable: false  
})
);  
}).click(function() {  
$.data(this, 'dialog').dialog('open');  
return false;  
});  
});
...