jquery dialog open new instance on button click

Question

I am trying to open multiple dialog windows with each button click...I can't figure this out and have researched but couldnt find any info.

code:

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

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

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

Fiddle: http://jsfiddle.net/Lj418jm5/2/

From the fiddle what i want to happen is each button clicked opens a seperate or NEW jquery dialog window.. is this possible?

Answer 1

Add a new div when click, with an ividual ID, and dialog that. The JSFIDDLE (when you open the second, move it, because they are overlaping each other)

$('.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

Yes, you simply need individual window elements for each window you want to have open simultaneously. Here's an updated fiddle.

When you ask for an element to be opened as a dialog, it is styled and displayed, but showing it again can't just duplicate the element. You end up with the same thing being reformatted, but that effectively removes the previous dialog.

To make that work well, you can link each button to a different element, like:

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

and use that info in the click handler:

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

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

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

});

Answer 3

Below you will find a dynamic solution. A window will be lazily-created if the button is clicked.

 $(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 }); }); }); 

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

Answer 4

You can separate instances to create jquery dialog, each opening in a separate window

$('.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
    });
});