Pop up

JDeveloper disse:
isso é uma modal window, ou modal dialog, deves encontrar facilmente código na net pesquisando por esses termos
Clicar para expandir...
Boas,

Eu encontrei este código, mas não sei o que alterar para abrir a modal ao carregar a pagina, sem precisar de carregar no botão.

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
Clicar para expandir...
 
existe um evento no body que é onload, podes aqui colocar a modal window visível. Olha para o código dessa modal window para veres como é que se torna visível.
 
joao.miguel disse:
Esse codigo so funciona se tiveres a bootstrap library no teu projecto mas e' o caminho a seguir.
Clicar para expandir...
Boas,

Eu tenho o seguinte código a funcionar conforme quero.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#myModal" ).dialog({
height: 600,
width: 450,
modal: true
});
});
</script>
</head>
<body>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">F&eacute;rias no Espa&ccedil;o NOA</h4>
</div>
<div class="modal-body">
<p style="text-align: center;"><img alt="" src="/ferias.jpg" style="width: 400px; height: 565px;" /></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</body>
</html>
Clicar para expandir...

Queria agora saber se é possível colocar algum efeito na modal, ou seja, aparecer e desaparecer da pagina com algum efeito, tipo descer a modal ao abrir a pagina e desvanecer ao fechar. algu do género.
 
LMAB disse:
Boas,

Eu tenho o seguinte código a funcionar conforme quero.



Queria agora saber se é possível colocar algum efeito na modal, ou seja, aparecer e desaparecer da pagina com algum efeito, tipo descer a modal ao abrir a pagina e desvanecer ao fechar. algu do género.
Clicar para expandir...
Podes fazer isso com Jquery.
 
Hey,
Podes usar o JS/Jquery (seja lá o que estiveres a usar) para adicionar o class CSS ao elemento que queres mostrar e fazes toda a animação com CSS.
Algo do tipo:

.modal {transparency:0; bottom:-100%;position:absolute;}

.modal.show {transparency:1; bottom:0; tranform:translateY(50%);}

Cumpz
 
DanielSintrão disse:
Hey,
Podes usar o JS/Jquery (seja lá o que estiveres a usar) para adicionar o class CSS ao elemento que queres mostrar e fazes toda a animação com CSS.
Algo do tipo:

.modal {transparency:0; bottom:-100%;position:absolute;}

.modal.show {transparency:1; bottom:0; tranform:translateY(50%);}

Cumpz
Clicar para expandir...

porquê transparency 0/1 e não display none/block (ou outro qq) ?
 
Apenas por efeitos de animação. Para o elemento não aparecer/desaparecer de repente.
O melhor para efeitos de segurança era controlar o elemento totalmente com JS, onde este era renderizado na totalidade com JS, e quando fosse para remover, fazia um transição com CSS para fora do ecrã com um timeout em JS para destruir o Node da DOM.
 
O display none remove o elemento da render tree, não é preciso JS para destruir o node.
Está na DOM mas efetivamente não está a ocupar memória.

O ideal até será usar os dois em conjunto (display e opacity), e consegues com keyframes como neste exemplo que fiz: https://jsfiddle.net/gdtds77z/4/

Fazer transições em CSS e depois usar setTimeouts em JS é má prática porque um não tem conhecimento do outro — o JS não tem forma de saber do final da transição de CSS.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo