show popup from iframe and dim out background including parent page too

Question

hello guys,

i m having a problem with popup, there is an iframe in my mainpage, which is containing some other page. i want to show popup from that containing page and make background dim. i m changing my mainpage styles like making it opacity .40 but thing is its getting applied to my popup too,,, my popup is also getting dim. what to do? i want to show popup clearly so that people gets attracted to popup

Answer 1

The parent frame is the only one that can put the dimmer layer over itself, but that would also dim the dialog you want to show. You can put that dialog in the parent frame and call it from the child frame, if you control both.

And interframe communication is not trivial:

• Are they on the same domain? (If not, there is hope but it is more difficult)
• Do you control both pages?

Answer 2

You can create dialog on parent and then fire it as:

(Assuming you have control on both frames and you have jquery-ui loaded on parent.)

parent.$dialog = jQuery("<div></div>");

parent.$dialog.html("YOUR MESSAGE GOES HERE!!!");
parent.$dialog.dialog({
    title : "YOUR MESSAGE TITLE!",  
    bgiframe: true,
    width: 400,
    zIndex: 2501,   
    modal: true,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: {
        'Yes': function() {
            jQuery(this).dialog('close');
        },
        'No': function() {
            jQuery(this).dialog('close');
            return false;
        }
    },
    close: function() {
        jQuery(this).dialog('destroy');
    }
}).show(400);           

Hope this helps, Sinan.

Answer 3

@sinan, thanks man, but in that popup i m using wizard based form for putting user data. so, i dont think its feasible solution. Hey is there any possibility to stop parent CSS inherit?