Div Apagar a Luz dentro de Iframe
Bom dia pessoal, estou com um problema que eu não estou conseguindo resolver.
Seguinte, eu tenho uma pagina index.html, e dentro dessa pagina tem um IFRAME como mostra o código abaixo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index Inicial</title>
</head>
<body>
<iframe id="meuIframe" src="indexiframe.html"></iframe>
</body>
</html>
Segue o código da pagina indexiframe.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efeito Apagar a Luz - JQuery</title>
<script type="text/javascript" src="http://www.linhadecomando.com/apagar_luz/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#opacidade').css('height', $(document).height()).hide();
$('button').click(function() {
$('#opacidade').toggle();
if ($('#opacidade').is(':hidden')) {
$('button').html('Apagar a luz');
} else {
$('button').html('Acender a luz');
}
});
});
</script>
<style type="text/css">body{
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif}
#botao{
background-color:#666666;
color:#FFFFFF;
cursor:pointer;
width:250px;
position:relative;
display:block;
z-index:999
}
#filme{
width:250px;
height:250px;
margin:0 auto;
border:#000000 2px solid;
padding:0;
position:relative;
display:block;
z-index:999;
background-color:#fff;
}
#opacidade {
position:fixed;
top:0; right:0; bottom:0; left:0;
margin:0; padding:0;
background:#000;
opacity:.80;
filter: alpha(opacity=80);
-moz-opacity: 0.80;
z-index: 1;
}
</style>
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<p align="center">Exemplo de como fazer um efeito de apagar a luz, usando JQuery</p>
<div id="filme" align="center">Teste</div>
<p align="center"><button id="botao">Apagar a luz</button></p>
<div id="opacidade"></div>
</body>
</html>
Quando eu clicar no botão para apagar a luz quero que a div #OPACIDADE cubra tando a pagina INDEX.HTML e a pagina INDEXIFRAME.HTML.
Colocando o código da forma que esta acima, a div #OPACIDADE cobre somente a pagina INDEXIFRAME.HTML, quero que cubra as duas paginas.
Alguém poderia me ajudar nessa situação?
Att;
Gilberto JrDiscussão (9)
Carregando comentários...