jquery ui dialog, open new dialog and close dialog behind

Question

My Site has a footer that open 4 different dialogs and load content to them from independent pages.

The footer pages can be opened independently if you enter them from search engine or type the url.

I have a function that opens the footer dialogs:

function FooterPopup(){
    $(document).ready(function(){
        $('#footerContactUs').on("click",function(){
            var $dialog=$('<div></div>').load($('#footerContactUs').attr('href')).dialog({
                close: function(event,ui){$(this).remove ();},
                autoOpen:false,
                width:700,
                height:610,
                resizable:'false',
                modal:true,
                show:'blind',
                hide:{effect:'blind',duration:300},
                dialogClass:'Contact'
            });
            $dialog.dialog('open');
            return false;
        });
    })
}

The independent pages have link that open another dialog in a different function,

so I have 2 situations:

1.dialog opens on top of another dialog.

2.dialog opens from an independent page.

code:

function Consult(){
    $(document).ready(function(){
        $('.ConsultHotels').on("click",function(){
            var $dialog=$('<div></div>').load($('.ConsultHotels').attr('href')).dialog({
                modal:true,
                close: function(event,ui){$(this).remove();
                $('.ui-datepicker').remove();},
                autoOpen:false,
                width:750,
                height:590,
                resizable:'false',
                show:'blind',
                hide:{effect:'blind',duration:300},
                open:function(event,ui){$('body').find('.ui-dialog-content').eq(0).dialog("close");},
                dialogClass:'ConsultClass'
            });
            $dialog.dialog('open');
            return false;
        });
    });
}

My problem is that I dont Know how to close the "parent" dialog from the first situation without closing the dialog in the second situation.

Please help,

Thanks.

You know you do NOT need the $(document).ready(function(){ in those functions. — Mark Schultheiss
– Mark Schultheiss, Commented Jan 25, 2012 at 14:00

PriorityMark · Accepted Answer · 2012-01-25 23:38:40Z

1

Why not just close any open dialogs before opening the new dialog?

$('.ConsultHotels').on("click",function(){
  // first close any open dialogs.  This approach is used in stead of just doing a .hide()
  //  because it will invoke any dialog close callbacks.
  $('.ui-dialog-titlebar-close:visible').click(); 

  // now initialize your dialog.
  var $dialog = $('<div></div>').load($('.ConsultHotels').attr('href')).dialog();
});

answered Jan 25, 2012 at 23:38

PriorityMark

3,24719 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Irena Over a year ago

The only thing is that when i'm closing the first dialog and open the second, the ".ui-widget-overlay" doesn't appear. Maybe it's because i'm doing - close: function(event,ui){$(this).remove ();}, in the first dialog? how do I get ".ui-widget-overlay" back?

PriorityMark Over a year ago

Destroy the dialog widget before you remove it, otherwise it'll still be initialized in memory.. $(this).dialog("destroy").remove();

Irena Over a year ago

Ok but it still doesn't open the ".ui-widget-overlay" in the second dialog although "modal:true".

PriorityMark Over a year ago

What version of jquery ui are you using? It seems to work fine in this fiddle: jsfiddle.net/fordlover49/9p2Y7 Make sure you remove the open event handler as well? If it's still not working, could you create a jsfiddle that reproduces the problem?

Collectives™ on Stack Overflow

jquery ui dialog, open new dialog and close dialog behind

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related