Ir para conteúdo
Fórum Script Brasil
  • 0

Select abre janela modal com iframe dentro


Mayck May

Pergunta

Boa tarde,

Estou tentando fazer com que ao selecionar uma opção no select, seja aberto uma janela modal e dentro dessa janela modal tenha um iframe por exemplo:

No select teria google.com.br, yahoo.com.br ao clicar na opção google.com.br seria aberto uma janela modal e dentro dela através de um iframe seria exibida a página do Google e ao clicar no yahoo.com.br abriria uma janela modal e dentro dela através de um iframe seria exibido a página do Yahoo

Segue abaixo os códigos:

Janela Modal

.css

<style type="text/css">
<!--
#mask{display:none; background:#000; position:fixed; left:0; top:0; z-index:10; width:100%; height:100%; opacity:0.3; z-index:999;}
.box-popup{display:none; width:810px; height:600px; background:#FFF; padding:10px; font:12px Verdana, Arial, Helvetica, sans-serif; color:#333; border:1px solid #DDD; float:left; font-size:12px; position:fixed; top:50%; left:50%; z-index: 99999;}
.btn_close{float:right; margin:-8px -8px 0 0;}
-->
</style>

.js

<script type="text/javascript">
  $(document).ready(function() {
	$('a.box-window').click(function() {
		var loginBox = $(this).attr('href');
		$(loginBox).fadeIn(300);
		var popMargTop = ($(loginBox).height() + 24) / 2; 
		var popMargLeft = ($(loginBox).width() + 24) / 2; 
		$(loginBox).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		$('body').append('<div id="mask"></div>');
		$('#mask').fadeIn(300);
		return false;
	});
	$('a.close, #mask').live('click', function() { 
	  $('#mask , .box-popup').fadeOut(300 , function() {
		$('#mask').remove();  
	}); 
	return false;
	});
  });
</script>

.html

<form>
<select size="1">
<option value="estado">Selecione</option> 
<option value="href="#box-janela" class="box-window"">Google</option> 
<option value="href="#box-janela-dois" class="box-window">Yahoo</option> 
 </select>
 <input type="submit" value="Buscar">
</form>



<div id="box-janela" class="box-popup"> <a href="#" class="close"><img src="js/fechar.png" class="btn_close" title="Fechar" alt="Fechar" /></a><br> <center><iframe title="orcamento" width="800" height="580" src="https://www.google.com.br/" frameborder="0" allowfullscreen></iframe></center> </div> <div id="box-janela-dois" class="box-popup"> <a href="#" class="close"><img src="js/fechar.png" class="btn_close" title="Fechar" alt="Fechar" /></a><br>

<div id="box-janela" class="box-popup-dois">
<a href="#" class="close"><img src="js/fechar.png" class="btn_close" title="Fechar" alt="Fechar" /></a><br><center><iframe title="orcamento" width="800" height="580" src="https://www.yahoo.com.br/" frameborder="0" allowfullscreen></iframe></center>
</div><div id="box-janela-dois" class="box-popup">
<a href="#" class="close"><img src="js/fechar.png" class="btn_close" title="Fechar" alt="Fechar" /></a><br>

Desde já agradeço pela ajuda

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...