Showing two dialogs at one onclick

JavaScript
1

Is it possible to show two modal dialogs simultaneously with one click? Please refer to the following code where the dialog with the following line of code shows perfectly fine.

$('#Information_details_dialog').modal("show").draggable();

However, when I try to show the second dialog, just like in the following code:

$('#secondInfodetails_dialog).modal("show").draggable();

I just see a blank dialog which I believe belongs to the #secondInfodetails_dialog and this dialog is basically stopping the first dialog to show. I was just wondering if it’s possible to show two dialogs at the same time with a click? Please let me know. Thanks




function InformationDialog() {


	 var self = this;

    this.cellClicked = false;
    this.urlKey = "showdocument";

    this.getData = function (roll_number_) {

        

        // Lookup the AJAX web service URL
        var url = myapp.getWebServiceURL(self.urlKey);
        

        var ajaxRequest = jQuery.ajax({
         
         

            data: {
                member_id: 24,
                roll_number: roll_number_
                

               
            },
            dataType: "json",
            method: "GET",
            cache : false,
            url: url
        })
        .done(function (data_, textStatus_, jqXHR_) {

        	

            var first_doc_contents = data_.docsList;
           
            var content = $('<pre />').html(first_doc_contents[1].note_content);
            


           $('#first_doc_contents').html(content); // Here you replace the content

            
           $('#Information_details_dialog').modal("show").draggable();

            
            var second_doc_contents = $('<pre />').html(r);
            
             

            $('#secondInfodetails_contents').html(second_doc_contents); 

           $('#secondInfodetails_dialog).modal("show").draggable();

            
           



        })
        .fail(function (jqXHR_, textStatus_, errorThrown_) {
            alert("Error in getData(): " + errorThrown_);
            return false;
        });

    };// end of getdata function


    // Initialize the virtual page
    this.initialize = function (fragment_) {

        

        
        self.getData(roll_number);

         

    };



}
2

No - the first modal locks the original page out from creating the second modal until the first modal is closed. If it doesn’t then it isn’t modal. You are asking for something that contradicts itself.

3

Thanks. I will not look into this direction then.

4

That’s hard to tell without knowing which of the dozens of jQuery modal plugins you’re actually using. ;-) I think with the jQuery UI dialog it would be technically possible… although I can’t imagine that this is a good idea regarding UX. Even if they are draggable, it crowds the screen and the user might quickly lose track of where to proceed; so it would probably be better to either combine the relevant content to one modal, or show them one after the other.

1 Like
5

Since opening two modals simultaneously is by definition impossible then nothing would make it technically possible.

Either one modal has to open the other so that or the second modal has to wait until the first is closed.

6

This feels like it could head in a direction that made pop-up blocking a ubiquitous feature.

Just the same, I have not tested it, but this seems to suggest that modals can be stacked.

If you need to stack multiple modals at the same time, just set the closeExisting option to false

8

Of course they can be stacked - it is opening two simultaneously that is impossible.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.