Janelas

Janelas Popup


Abre em outra janela

<a href="http://manualnarede.blogspot.com.br" target=_blank_"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2IU93_wZ6uHgbZ8Ze6d-cFMu9gAJRUQzf5X6s7ZWJYKHT-9Ao1VYUZDwNup-WfKlguJ8JkYvK7g9OW3ltKi_ukgM9vP2wOKsZbZaWhBEWulEnyBaph7zc7K0wkZ2jDCZIenhABTIfvU/s1600/ImgP.png" class="saltarPopup3" /> <button class="saltarPopup3">clique aqui</button> </a>
Janela no topo a direita

<a type="text" name="nome2"border=0px rows=10 cols=30"href="#i" onclick="javascript:window.open('#','Imagem','width=200,height=200,scrollbars=no,top=50,left=1150');"><button class="saltarPopup3">clique aqui</button></a>
Janela no topo ao centro

<a type="text" name="nome2"border=0px rows=10 cols=30"href="#i" onclick="javascript:window.open('#','Imagem','width=200,height=200,scrollbars=no,top=50,left=550');"><button class="saltarPopup3">clique aqui</button></a>
Janela no topo a esquerda

<a type="text" name="nome2"border=0px rows=10 cols=30"href="#i" onclick="javascript:window.open('#','Imagem','width=200,height=200,scrollbars=no,top=50,left=5');"><button class="saltarPopup3">clique aqui</button></a>
Janela no rodapé a direita

<a type="text" name="nome2"border=0px rows=10 cols=30"href="#i" onclick="javascript:window.open('#','Imagem','width=200,height=200,scrollbars=no,top=460,left=1150');"><button class="saltarPopup3">clique aqui</button></a>
Janela no rodapé ao centro

<a type="text" name="nome2"border=0px rows=10 cols=30"href="#i" onclick="javascript:window.open('#','Imagem','width=200,height=200,scrollbars=no,top=460,left=550');"><button class="saltarPopup3">clique aqui</button></a>
Janela no rodapé a esquerda

<a type="text" name="nome2"border=0px rows=10 cols=30"href="#i" onclick="javascript:window.open('#','Imagem','width=200,height=200,scrollbars=no,top=460,left=5');"><button class="saltarPopup3">clique aqui</button></a>
Janela ao centro

<a type="text" name="nome2"border=0px rows=10 cols=30"href="#i" onclick="javascript:window.open('#','Imagem','width=200,height=200,scrollbars=no,top=250,left=550');"><button class="saltarPopup3">clique aqui</button></a>
Janela ao centro com scroll

<a type="text" name="nome2"border=0px rows=10 cols=30"href="#i" onclick="javascript:window.open('#','Imagem','width=200,height=200,scrollbars=yes,top=250,left=550,border=100');"><button class="saltarPopup3">clique aqui</button></a> Nesse Tuto, vou deixar aqui uma Janela Popup bem eficiente, ela é simples, dinâmica e principalmente atende a visualização de um projeto ou lista de um determinado conteúdo. 

Vamos começar?

Você precisará editar os comandos do arquivo CSS, caso necessite que cada janela seja direcionada para conteúdos distintos. Veja abaixo:

<style>
/*MODELO 1*/ Esse efeito cai do topo da página
.mbs-eleitor-1{
top: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.mbs-eleitor-1 .mbs-content {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
opacity: 0;
}
.mbs-show.mbs-eleitor-1 .mbs-content {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
border-radius: 0 0 3px 3px;
opacity: 1;
}
/*MODELO 2*/ Esse efeito abre no centro da página
.mbs-eleitor-2.mbs-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.mbs-eleitor-2 .mbs-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-3000px) rotateY(90deg);
-moz-transform: translateZ(-3000px) rotateY(90deg);
-ms-transform: translateZ(-3000px) rotateY(90deg);
transform: translateZ(-3000px) rotateY(90deg);
opacity: 0;
}
.mbs-show.mbs-eleitor-2 .mbs-content {
-webkit-animation: slit .7s forwards ease-out;
-moz-animation: slit .7s forwards ease-out;
animation: slit .7s forwards ease-out;
}
@-webkit-keyframes slit {
50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
@-moz-keyframes slit {
50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
@keyframes slit {
50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
</style>


No exemplo acima, temos dois tipos de janelas, então, escolha o efeito que você prefere e repita só trocando os comandos (ex: mbs-eleitor-1.mbs-modal  e  mbs-eleitor-2.mbs-modal ).

Nota: Abaixo desses comandos colocar o restante do arquivo CSS para fazer o efeito.

Agora vamos editar o HTML, que é onde você colocará o seu conteúdo, e ao clicar no botão, saltará a janela com o texto.

Modelo janela 1
<div class="mbs-modal mbs-eleitor-1" id="modal-1"><button class="mbs-close">X</button><div class="mbs-content"><h3>Eu sou uma janela!</h3><div><ul><div id="content" style="width:465; height:245px; overflow-y:scroll;"><ul style="position: relative;"><li>Coloque o seu conteúdo!</li><br/></ul></div></ul></div></div></div>

Modelo janela 2

<div class="mbs-modal mbs-eleitor-2" id="modal-2"><button class="mbs-close">X</button><div class="mbs-content"><h3>Eu sou uma janela!</h3><div><ul><div id="content" style="width:465; height:245px; overflow-y:scroll;"><ul style="position: relative;"><li>Coloque o seu conteúdo!</li><br/></ul></div></ul></div></div></div>

<!--Funcionalidade importante-->
<div class="mbs-overlay"></div>
<!--Funcionalidade importante-->

<script type="text/javascript" src="http://yourjavascript.com/1652271521/jsmodaldescricao1.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/2367235125/jsmodaldescricao2.js"></script>

Nota:

.O número 1 e 2 é o que comandará e diferenciará o conteúdo de outras janelas... você pode repetir quantos números desejar.(deve ser feito o mesmo com o arquivo CSS)

.Em vermelho é o seu título

.Em azul coloque o seu conteúdo

Agora os botões
<button class="mbs-trigger" data-modal="modal-1">comprar</button>
<button class="mbs-trigger" data-modal="modal-2">comprar</button>


Veja a demonstração da janela modelo 1 e janela modelo 2 abaixo:

Confira o código completo abaixo

Modelo 1
<button class="mbs-trigger Obotao" data-modal="modal-1">Botão 1</button> <style> .container { background: #fff; min-height: 100%; } .mbs-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px;/*o máximo da largura da janela;*/ min-width: 520px;/*o mínimo da largura da janela;*/ height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .mbs-show { visibility: visible; } .mbs-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: #868A08;/*rgba(143,27,15,0.8)*//*COR DE FUNDO DA PÁGINA AO ABRIR A JANELA*/ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .mbs-show ~ .mbs-overlay { opacity: 1; visibility: visible; } /* Content styles */ .mbs-content { color: #fff;/*Cor da letra da descrição (branco)*/ background: #5E610B;/*Cor do fundo da descrição dos ítens*/ position: relative; border-radius: 0px; /*Bordas arredondadas*/ margin: 0 auto; } .mbs-content h3 { margin: 0; padding: 0.4em; text-align: center; font-size: 2.4em; font-weight: 300; opacity: 0.8; background: rgba(0,0,0,0.1); border-radius: 10px 10px 0 0; } .mbs-content > div { padding: 15px 40px 30px; margin: 0; font-weight: 300; font-size: 1.15em; } .mbs-content > div p { margin: 0; padding: 10px 0; } .mbs-content > div ul { margin: 0; padding: 0 0 30px 20px; } .mbs-content > div ul li { padding: 5px 0; } .mbs-content button { display: block; margin: 0 auto; font-size: 0.8em; } .Obotao {width:100px;height:30px;background:#5E610B;color:#868A08;font-family: 'Open Sans Condensed'; font-size: 18px;cursor:pointer;border:0px;border-radius:4px;} .Obotao:hover {width:100px;height:30px;background:#868A08;color:#5E610B;font-family: 'Open Sans Condensed'; font-size: 18px;cursor:pointer;border:0px;border-radius:4px;} .botaoClose {width:30px;height:30px;background:#5E610B;color:#868A08;font-family: 'Open Sans Condensed'; font-size: 18px;cursor:pointer;border:0px;border-radius:4px;inline:none;} .botaoClose:hover {width:30px;height:30px;background:#868A08;color:#5E610B;font-family: 'Open Sans Condensed'; font-size: 18px;cursor:pointer;border:0px;border-radius:4px;inline:none;} /*Modelo 1*/ .mbs-eleitor-1{ top: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .mbs-eleitor-1 .mbs-content { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; opacity: 0; } .mbs-show.mbs-eleitor-1 .mbs-content { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); border-radius: 0 0 3px 3px; opacity: 1; } @-webkit-keyframes slit { 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;} 100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; } } @-moz-keyframes slit { 50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;} 100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; } } @keyframes slit { 50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;} 100% { transform: translateZ(0) rotateY(0deg); opacity: 1; } } </style> <div class="mbs-modal mbs-eleitor-1" id="modal-1"><button class="mbs-close botaoClose">X</button><div class="mbs-content"><h3>Seu título aqui</h3><div><ul><div id="content" style="width:465; height:245px; overflow-y:scroll;"><ul style="position: relative;">SEU CONTEÚDO AQUI<br/></ul></div></ul></div></div></div> <div class="mbs-overlay"></div> <!--recomendo hospedar esses links no google drive--> <script type="text/javascript" src="http://yourjavascript.com/1652271521/jsmodaldescricao1.js"></script> <script type="text/javascript" src="http://yourjavascript.com/2367235125/jsmodaldescricao2.js"></script> <!--recomendo hospedar esses links no google drive-->
Modelo 2
<button class="mbs-trigger Obotao" data-modal="modal-2"->Botão 2</button> <style> .container { background: #fff; min-height: 100%; } .mbs-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px;/*o máximo da largura da janela;*/ min-width: 520px;/*o mínimo da largura da janela;*/ height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .mbs-show { visibility: visible; } .mbs-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: #868A08;/*rgba(143,27,15,0.8)*//*COR DE FUNDO DA PÁGINA AO ABRIR A JANELA*/ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .mbs-show ~ .mbs-overlay { opacity: 1; visibility: visible; } /* Content styles */ .mbs-content { color: #fff;/*Cor da letra da descrição (branco)*/ background: #5E610B;/*Cor do fundo da descrição dos ítens*/ position: relative; border-radius: 0px; /*Bordas arredondadas*/ margin: 0 auto; } .mbs-content h3 { margin: 0; padding: 0.4em; text-align: center; font-size: 2.4em; font-weight: 300; opacity: 0.8; background: rgba(0,0,0,0.1); border-radius: 10px 10px 0 0; } .mbs-content > div { padding: 15px 40px 30px; margin: 0; font-weight: 300; font-size: 1.15em; } .mbs-content > div p { margin: 0; padding: 10px 0; } .mbs-content > div ul { margin: 0; padding: 0 0 30px 20px; } .mbs-content > div ul li { padding: 5px 0; } .mbs-content button { display: block; margin: 0 auto; font-size: 0.8em; } .Obotao {width:100px;height:30px;background:#5E610B;color:#868A08;font-family: 'Open Sans Condensed'; font-size: 18px;cursor:pointer;border:0px;border-radius:4px;} .Obotao:hover {width:100px;height:30px;background:#868A08;color:#5E610B;font-family: 'Open Sans Condensed'; font-size: 18px;cursor:pointer;border:0px;border-radius:4px;} .botaoClose {width:30px;height:30px;background:#5E610B;color:#868A08;font-family: 'Open Sans Condensed'; font-size: 18px;cursor:pointer;border:0px;border-radius:4px;inline:none;} .botaoClose:hover {width:30px;height:30px;background:#868A08;color:#5E610B;font-family: 'Open Sans Condensed'; font-size: 18px;cursor:pointer;border:0px;border-radius:4px;inline:none;} /*Modelo 2*/ .mbs-eleitor-2.mbs-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .mbs-eleitor-2 .mbs-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-3000px) rotateY(90deg); -moz-transform: translateZ(-3000px) rotateY(90deg); -ms-transform: translateZ(-3000px) rotateY(90deg); transform: translateZ(-3000px) rotateY(90deg); opacity: 0; } .mbs-show.mbs-eleitor-2 .mbs-content { -webkit-animation: slit .7s forwards ease-out; -moz-animation: slit .7s forwards ease-out; animation: slit .7s forwards ease-out; } @-webkit-keyframes slit { 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;} 100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; } } @-moz-keyframes slit { 50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;} 100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; } } @keyframes slit { 50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;} 100% { transform: translateZ(0) rotateY(0deg); opacity: 1; } } </style> <div class="mbs-modal mbs-eleitor-2" id="modal-2"><button class="mbs-close botaoClose">X</button><div class="mbs-content"><h3>Seu título aqui</h3><div><ul><div id="content" style="width:465; height:245px; overflow-y:scroll;"><ul style="position: relative;">SEU CONTEÚDO AQUI<br/></ul></div></ul></div></div></div> <div class="mbs-overlay"></div> <!--recomendo hospedar esses links no google drive--> <script type="text/javascript" src="http://yourjavascript.com/1652271521/jsmodaldescricao1.js"></script> <script type="text/javascript" src="http://yourjavascript.com/2367235125/jsmodaldescricao2.js"></script> <!--recomendo hospedar esses links no google drive-->