Tenho um site normal e preciso que quando eu entro nele tenha um pop up com um video do youtube. Um pop up normal com um botão de fechar. Pode ser feito em html/css ou com javascript ou jquery
1 Resposta
Tiago, basicamente você precisa colocar algum elemento que ocupe toda a pagina, para isto você pode fazer uso do position: fixed
, width: 100%
, height: 100%
e z-index: 1003
.
dentro deste elemento, você pode incluir um elemento que irá dá um efeito de esmaecimento do conteúdo da pagina, um opacity: 0.4
deve resolver.
para centralizar o pop-up no centro da pagina, você pode fazer um dock da mesma usando top|left|bottom|right: 0px
, então atribuir um height
e width
fixos e setar o margin: auto
.
No exemplo abaixo estou utilizando a tag <video>
, você só vai precisar substituir a mesma pelo conteúdo que desejar.
var modalClose = document.querySelector(".modal-close");
modalClose.addEventListener("click", function () {
modalClose.parentNode.parentNode.classList.add("hidden");
});
html, body {
padding: 0px;
margin: 0px;
}
.modal-whapper {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: 1003;
animation: show 1s linear;
-webkit-animation: show 1s linear;
}
.hidden {
display: none;
}
@keyframes show {
0% { opacity: 0 }
100% { opacity: 1 }
}
@-webkit-keyframes show {
0% { opacity: 0 }
100% { opacity: 1 }
}
.modal-overlay {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
opacity: 0.4;
background-color: black;
}
.modal-container {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
height: 320px;
width: 560px;
background-color: white;
border-radius: 5px;
box-shadow: 0px 0px 10px black;
}
.modal-close {
position: absolute;
top: -16px;
right: -16px;
width: 32px;
height: 32px;
cursor: pointer;
background-image: url('http://cdn.flaticon.com/svg/32/32178.svg');
background-color: white;
background-size: calc(100% - 10px);
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
border: 3px solid black;
box-shadow: 0px 0px 10px black;
}
video {
height: 100%;
width: 100%;
border-radius: 5px;
overflow: hidden;
}
<div class="modal-whapper">
<div class="modal-overlay">
</div>
<div class="modal-container">
<div class="modal-content">
<video controls="">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"><br>
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"><br>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><br>
<source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp"><br>
</video>
</div>
<div class="modal-close">
</div>
</div>
</div>
além disto, também fixei o X
para fechar no topo do modal e fiz uma pequena animação para exibir o modal.