Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Script de janela modal centralizada com iframe jQuery

10-11-2016 05:18

Nesse post estarei postando um script de janela modal, onde ao clicar em um botão irá acontecer o seguinte:

- A tela escurece e mostra a janela modal centralizada na tela;
- A janela modal carrega um documento dentro de um iframe na janela modal;
- A janela modal mostra um botão para fechar a janela modal no topo na direita.


Esse é de grande utilidade, veja as vantagens:

- A navegação é independente da janela principal, o usuário navega dentro da modal, já que é um iframe;
- É possível passar valores via link GET para o arquivo dentro da modal;
- Os valores passados via link são definidos no próprio elemento que recebe o clique;
- Ao clicar fora da janela modal a mesma é fechada;
- O script permite atualizar o documento principal ou redirecionar o usuário para outro documento ao fechar a modal;
- A janela modal pode ocupar 100 por cento da tela ou ficar centralizada na tela.


Segue abaixo um exemplo desse script

<style> #modal{ background-color: rgba(0, 0, 0, 0.6); position:fixed; top:0; left:0; width:100%; height:100%; display:none; z-index:1 } #modal-iframe{ border-color:white; border-style:solid; border-width:1px; background:#FFF; position:absolute; /* para a janela modal ocupar 100% da tela coloque 100% nas duas linhas abaixo */ width:50%; height:50%; overflow-y: auto; margin:0; /* para a janela modal ocupar 100% da tela coloque 0 nas duas linhas abaixo */ top:25%; left:25%; right:0; bottom:0; text-align:center; z-index:2 } .modal-fechar{ background:#ccc center center no-repeat; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAEXwAABF8B2dhh0gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACRSURBVDiNtZVLCsAgDEQfvUOP0fuvegmP4SWmGy22WJxAKmQTJk/zISIJSQAHcAJ7960M2FvMcfsGWAUEFAfaYKXF1A59w+RAXzCNUNqTNbEp9APW7VwJHlBH6wvNi91Uip1FoD5Wnd0O+k0LjIU1VhvZ59eUA7B1Uxaw2NgYMH+wXWHg4vzlkLu+0hds9hdwAUdCLv91bAeKAAAAAElFTkSuQmCC); width:35px; height:35px; cursor:pointer; border-color:#ccc; border-style:solid; border-width:3px; border-radius:7px; position:fixed; padding:5px; right:10px; top:10px; font-family:arial; font-style:normal; font-weight:900; text-decoration:none; color:#000; opacity:.5;z-index:3 } .modal-fechar:hover{opacity:.8} .modal{cursor:pointer} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(a){ $(".modal").click(function(a){ $("#modal").fadeIn(500), url=$(this).attr("data-url")+$(this).attr("data-get"); $("#modal-iframe").attr("src",url) }), $("#modal, .modal-fechar").click(function(a){ $("#modal").fadeOut(500); // se quiser atualizar a página principal após fechar a modal descomente a linha abaixo //window.location.reload(); // se quiser redirecionar o usuário para outra página após fechar a modal descomente a linha abaixo //location.href="outro_documento.html"; }); }); </script> <div class="modal" data-url="teste2.php" data-get="?valor=valor enviado">modal</div> <div id="modal"> <div class="modal-fechar"></div> <iframe id="modal-iframe"></iframe> </div>

2
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado