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

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 a开发者_Python百科lso getting dim. what to do? i want to show popup clearly so that people gets attracted to popup

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.

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?