Modal que não interfira no Muse

[priscilapm 0]

Pessoal, bom dia!!

 

Meu cliente tem um site feito em Muse, e preciso colocar um popunder na página inicial, porém não entendo muito disso.

Preciso de um modal que nao interfica no Muse, pois o que eu uso em outros sites de outrso cliente é o Jquery, porém ele nao funciona no Muse.

 

Alguém pode me ajudar?!

Abç.

[Sergio Tomas 16]

Bom dia priscila, você tem algum código que você tentou fazer??

[priscilapm 0]

Oi Sergio, tem sim, usei o código abaixo como teste, porém nao quero clicar em um link para abrir o pop under, quero que ele abra direto quando o cliente acessar o site.

 

<style type='text/css'>

.dragme { cursor: move }

</style>

<script type='text/javascript'>

var ie = document.all;

var nn6 = document.getElementById &&! document.all;var isdrag = false;

var x, y;

var dobj;

function onload( e ) {

if( isdrag ) {

dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;

dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;

return false;

}

}function selectmouse( e ) {

var fobj = nn6 ? e.target : event.srcElement;

var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme") {

fobj = nn6 ? fobj.parentNode : fobj.parentElement;

} if (fobj.className=="dragme") {

isdrag = true;

dobj = document.getElementById("styled_popup");

tx = parseInt(dobj.style.left+0);

ty = parseInt(dobj.style.top+0);

x = nn6 ? e.clientX : event.clientX;

y = nn6 ? e.clientY : event.clientY;

document.onmousemove=movemouse;

return false;

}

}

function styledPopupClose() {

document.getElementById("styled_popup").style.display = "none";

}document.onmousedown=selectmouse;

document.onmouseup=new Function("isdrag=false");

function fireMyPopup() {

myPopupRelocate();

document.getElementById("mypopup").style.display = "block";

document.body.onscroll = myPopupRelocate;

window.onscroll = myPopupRelocate;

}

document.body.onload = window.setTimeout("fireMyPopup()", 1500);</script>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; left: 50px;'>

<table width='380' cellpadding='0' cellspacing='0' border='0'>

<tr>

<td><img height='23' width='356' src='images/x11_title.gif' class='dragme'></td>

<td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>

</tr>

<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>

Drag my window title to see me moving :-)

</td></tr>

</table>

</div><input type='submit' onclick='document.getElementById("styled_popup").style.display="block"' value=' Fire! '>

Obrigada por responder

[Sergio Tomas 16]

Certo, para chamar o popup assim que o cliente entrar você deve colocar esta linha de código em seu script:

window.onload = function(){
      var popup = document.getElementById("styled_popup");
      
      //exibo o popup
      popup.style.display = "block";
}

A função window.onload faz com que o código só seja executado quando tudo estiver carregado, então quando ele carregar ele vai pegar o seu popup e vai dar um block nele.

 

obs: Aqui no forum quando você for postar código coloque ele dentro de um bloco de código "<>" fica mais fácil para visualizar ;)

[priscilapm 0]

ok, obirgada. Vou testar

[priscilapm 0]

Perdão Sergio, coloquei código errado, segue código certo.. porém ele só abre quando clica..

 

esse código que você me mandou, onde eu colocaria ele no meu código?

<title>Janela modal</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
		<script type="text/javascript">
			$(document).ready(function(){
				$("a[rel=modal]").click( function(ev){
					ev.preventDefault();

					var id = $(this).attr("href");

					var alturaTela = $(document).height();
					var larguraTela = $(window).width();
	
					//colocando o fundo preto
					$('#mascara').css({'width':larguraTela,'height':alturaTela});
					$('#mascara').fadeIn(1000);	
					$('#mascara').fadeTo("slow",0.8);

					var left = ($(window).width() /2) - ( $(id).width() / 2 );
					var top = ($(window).height() / 2) - ( $(id).height() / 2 );
					
					$(id).css({'top':top,'left':left});
					$(id).show();	
 				});

 				$("#mascara").click( function(){
 					$(this).hide();
 					$(".window").hide();
 				});

 				$('.fechar').click(function(ev){
 					ev.preventDefault();
 					$("#mascara").hide();
 					$(".window").hide();
 				});
			});
		</script>

		<style type="text/css">

		.window{
			display:none;
			width:300px;
			height:300px;
			position:absolute;
			left:0;
			top:0;
			background:#FFF;
			z-index:9900;
			padding:10px;
			border-radius:10px;
		}

		#mascara{
			position:absolute;
  			left:0;
  			top:0;
  			z-index:9000;
  			background-color:#000;
  			display:none;
		}

		.fechar{display:block; text-align:right;}

		</style>
<!-- -------------------------------- -->

		
   </head>
 <body>
 
 <!-- ------------------------------------------------------------------------------ -->

		<a href="#janela1" rel="modal">Janela modal</a>
		<a href="#janela2" rel	="modal">Janela 2 modal</a>


		<div class="window" id="janela1">
			<a href="#" class="fechar">X Fechar</a>
			<h4>Primeira janela moda</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p>
			<p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p>
		</div>

		<div class="window" id="janela2">
			<a href="#" class="fechar">X Fechar</a>
			<h4>Formulario</h4>
			<form action="#" method="post">
				<label for="nome">Nome:</label>
				<input type="text" name="nome" id="nome">
				<br />

				<label for="nome">Senha:</label>
				<input type="text" name="senha" id="senha">
				<br />

				<input type="submit" value="enviar">

			</form>
		</div>

		<!-- mascara para cobrir o site -->	
		<div id="mascara"></div>

<!-- ------------------------------------------------------------------------------- -->
 

[Snowden 94]

$(document).ready(function(){

$("a[rel=modal]").click( function(ev){

[...]

}).trigger('click'); //<-- add

});

[priscilapm 0]

Muito obrigada Ninja, deu certo aqui..

[priscilapm 0]

<title>Janela modal</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

<script type="text/javascript">

 

<!-- ------ -->

window.onload = function(){

var popup = document.getElementById("styled_popup");

 

//exibo o popup

popup.style.display = "block";

}

<!-- ------ -->

 

$(document).ready(function(){

$("a[rel=modal]").click( function(ev){

ev.preventDefault();

 

 

var id = $(this).attr("href");

 

var alturaTela = $(document).height();

var larguraTela = $(window).width();

 

//colocando o fundo preto

$('#mascara').css({'width':larguraTela,'height':alturaTela});

$('#mascara').fadeIn(1000);

$('#mascara').fadeTo("slow",0.8);

 

var left = ($(window).width() /2) - ( $(id).width() / 2 );

var top = ($(window).height() / 2) - ( $(id).height() / 2 );

 

$(id).css({'top':top,'left':left});

$(id).show();

/*});*/

}).trigger('click');

 

$("#mascara").click( function(){

$(this).hide();

$(".window").hide();

});

 

$('.fechar').click(function(ev){

ev.preventDefault();

$("#mascara").hide();

$(".window").hide();

});

});

</script>

 

<style type="text/css">

 

.window{

display:none;

width:300px;

height:300px;

position:absolute;

left:0;

top:0;

background:#FFF;

z-index:9900;

padding:10px;

border-radius:10px;

}

 

#mascara{

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}

 

.fechar{display:block; text-align:right;}

 

</style>

<!-- -------------------------------- -->

 

 

</head>

<body>

 

<!-- ------------------------------------------------------------------------------ -->

 

<a href="#janela1" rel="modal"></a>

<a href="#janela2" rel ="modal"></a>

 

 

<!-- <div class="window" id="janela1">

<a href="#" class="fechar">X Fechar</a>

<h4>Primeira janela moda</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p>

<p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p>

</div> -->

 

<div class="window" id="janela2">

<a href="#" class="fechar">X Fechar</a>

<!-- <h4>Formulario</h4>

<form action="#" method="post">

<label for="nome">Nome:</label>

<input type="text" name="nome" id="nome">

<br />

 

<label for="nome">Senha:</label>

<input type="text" name="senha" id="senha">

<br />

 

<input type="submit" value="enviar">

 

</form> -->

</div>

 

<!-- mascara para cobrir o site -->

<div id="mascara"></div>