Problemas para abrir janela modal de acordo com opção do select?

[edilson_rj 0]

Olá,

 

Eu quero fazer com que uma janela modal seja aberta automaticamente ao selecionar uma das opções do select

O código da Janela modal é o seguinte:

<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>

 

O css é esse aqui:

.window{
    display:none;
    width:300px;
    height:300px;
    position:absolute;
    left:0;
    top:0;
    background:#FFF;
    z-index:9900;
    padding:10px;
    border-radius:10px;
}
 
#mascara{
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
}
 
.fechar{display:block; text-align:right;}

Pra abrir eu to tentando fazer dessa forma aí em baixo, eu até consigo fazer com que ao mudar a opção se abra um endereço qualquer em outra aba do browser mas a janela modal não abre de jeito nenhum, Meu conhecimento de JavaScript não é dos maiores, então qualquer ajuda é bem vinda... :)

<script type="text/javascript">

function abreJanela(URL) {
location.href=URL; location.rel="modal";

}

</script>
<select style="width:142px" onchange="abreJanela(this.value)">
                            
                            <option value="#janela1"> Simples </option>
                            <option value="#janela2"> Cliente de entrega</option>
                            <option value="http://www.google.com.br">Cliente de Fatura</option>
                            <!-- Quando eu seleciono a opção pra abrir o google funciona como eu quero mas como eu faço para que se abra a janela modal?-->
                        </select>

 

[angelorubin 142]

Boa tarde,

 

Com jQuery UI da para fazer assim - http://jsfiddle.net/angelorubin/XpNfB/

[edilson_rj 0]

Eu copio o código e colo na página e não acontece nada.... :upset:

[Bergs 53]

você está chamando a janela modal com o clink(), deve usar o change() do jquery para pegar o valor do seu option e por aí vai, entendeu?