Question

我试图打开多个对话框窗口，每次点击按钮...我无法解决这个问题并进行了研究，但无法找到任何信息。

代码：

$('.dvclick').click(function(e) {

    var title = $(this).attr('id');

    $("#info_window").dialog({
        width: 200,
        title: title
    });
});

小提琴：http://jsfiddle.net/Lj418jm5/2/

从小提琴中我想要发生的是每个按钮点击打开一个单独的或新的jquery对话框窗口..这可能吗？

Answer 1

点击时添加新的div，使用个人ID和对话框。 JSFIDDLE（当你打开第二个时，移动它，因为它们相互重叠）

$('.dvclick').click(function (e) {

        var title = $(this).attr('id');
        var id = 'dialog' + '_' + title;
        $('body').append('<div id="' + id + '">This is div: ' + id + '</div>');

        $("#" + id).dialog({
            width: 200,
            title: title
        });
    });

Answer 2

是的，您只需要为要同时打开的每个窗口添加单独的窗口元素。 Here's an updated fiddle.

当您要求将某个元素作为对话框打开时，它会被设置样式并显示，但再次显示它不能只复制该元素。您最终会重新格式化相同的内容，但这会有效地删除以前的对话框。

为了更好地工作，您可以将每个按钮链接到不同的元素，例如：

   <button id='click1' class='dvclick' data-window='info_window1'>click1</button>
<button id='click2' class='dvclick' data-window='info_window2'>click2</button>
<button id='click3' class='dvclick' data-window='info_window3'>click3</button>

并在点击处理程序中使用该信息：

$('.dvclick').click(function(e) {

var title = $(this).attr('id');
var windowElem = $(this).data('window');

$("#" + windowElem).dialog({
    width: 200,
    title: title
});

}）;

Answer 3

您将在下面找到动态解决方案。如果单击该按钮，将懒惰地创建一个窗口。

＆＃13;

$(document).ready(function () {
    $('.dvclick').click(function (e) {
        var title = $(this).attr('id');
        var selector = 'info_window' + title.replace(/[^\d]+/g, '');
        // Create the window, if not already created.
        if ($('#' + selector).length === 0) {
            var newWindow = $('#info_window').clone();
            newWindow.attr('id', selector);
            newWindow.appendTo($('body'));
        }

        $('#' + selector).dialog({
            width: 200,
            title: title
        });
    });
});

＆＃13;

<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

<!-- Dummy Window: This is a template for cloning... -->
<div id="info_window" style="display:none">
    <b>Info</b>
    <hr />
    <i>Test</i>
</div>

<button id='click1' class='dvclick'>click1</button>
<button id='click2' class='dvclick'>click2</button>
<button id='click3' class='dvclick'>click3</button>

＆＃13;

Answer 4

您可以分隔实例来创建jquery对话框，每个对话框都在一个单独的窗口中打开

$('.dvclick').click(function(e) {

   var title = $(this).attr('id');

    var $window =  $("#info_window" + title);

    //check if window exist 
    if($window.attr("id") == null)
    {
       //create an dummy window and append to body
       var $div = $("<div></div>");
       $div.attr("id",info_window" + title);
       $div.css("display","none");
       $("body").append($div);
    }

    $("#info_window" + title).dialog({
      width: 200,
      title: title
    });
});

jquery对话框在按钮单击时打开新实例

4 个答案: