CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
chamara
chamara

Reputation: 12709

using iframe as a page overlay dynamically

I have added the following iframe to a page

<iframe src='http://redbug.redrocksoftware.com.au:80/Pages/chamara.html' style="position:absolute;z-index:1;" ></iframe>

chamara.html page contains a button and when I click that button I need the current page to cover up with an overly.

Feedback is the button inside iframe: enter image description here

When I click it I need something like below to happen.

enter image description here

I have tried with iframe absolute positioning and z-index but couldn't get anything to work yet.

Upvotes: 2

Views: 2356

Answers (1)

Rafael Almeida
Rafael Almeida

Reputation: 687

Haha, finally finished the demo! :P

Well, let's go. If you need the iframe cover the whole page only when his button is fired, you can use jQuery to handle the click event. You need use the contents() to get the iframe content, then the find() to get the element that you want. Basically this:

$("#iframe").contents().find("#iframe_button").click(function () {
    // Button fired!
})

To the iframe cover all the page I wrote this CSS class:

.iframe_cover {
    position:absolute; 
    top:0; 
    left:0; 
    width:100% !important; 
    height:100% !important;
    border:0;
}

So, when the button is fired, the iframe will have this class. Look:

$("#iframe").contents().find("#iframe_button").click(function () {
    $("#iframe").addClass("iframe_cover");
})

Demo: http://rafaelalmeida.net78.net/exemplos/soen/29454285-iframe-button/

Upvotes: 3

Related Questions