show Div on top of iframe after clicking button in

Posted by Gopal_nivas under CSS 3 on 7/1/2011 | Points: 10 | Views : 3624 | Status : [Member] | Replies : 1

i was showing a pdf file in iframe in page load.

now i have a button in my page(not in iframe)

i want to click that button then i want to show the div contains a text box on top of the iframe.

for showing the div in button click i was used to show the div through CSS.

the CSS is:
#panelBooMark {
width: 270px;
height: 688px;
position: absolute;
left: -270px;
z-index: 200;
filter: alpha(opacity=85);
opacity: .85;

i was calling this in div tag. and show the div tag in my page i was using a javascript to show. but it is showing
backside of the iframe.

my jquery is:
var sipPos = 0;
var sipPos1 = 0;
$('#<% = BookMarkButton.ClientID %>').click(function(e){
$("#panelBooMark").animate({ left: sipPos }, 800, 'linear', function() {
if(sipPos == 0) { sipPos = -270; }
else { sipPos = 0; }


my ifame value is:

<iframe id="CurrentPage" runat="server" unselectable="on" src="c://103/2.pdf" style="position:relative;text-align:center;width:900px;height:700px;z-index:-1;"></iframe>

but for me it is showing back side of the iframe.

how to handle this..

need ur suggestions with examples..


Posted by: Ndebata on: 7/4/2011 [Member] Starter | Points: 25

Try to give a higher Z-index (10000) value for the div and change that of iframe to 100

Gopal_nivas, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response