Skip to content

Commit

Permalink
Janelas Modais
Browse files Browse the repository at this point in the history
Design Tablet e PC
Javascript
  • Loading branch information
JoaoVitorDomingos committed Jul 21, 2024
1 parent b6d38fe commit fe52100
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 15 deletions.
86 changes: 86 additions & 0 deletions css/media_query.css
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,52 @@
}


/* JANELAS MODAIS */
.fade {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 5;
}

.janela {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 80%;
border-radius: 5px;
z-index: 10;
}

.janela img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.janela > div {
padding: 15px;
display: flex;
flex-direction: column;
height: calc(697px - 252px);
}

.janela p {
height: calc(415px - 192px);
}

.janela > div > div a {
font-size: 1.3em;
}

.janela > div > button {
font-size: 1.3em;
}


/* CONTATO */
#contato {
margin: 60px 0;
Expand Down Expand Up @@ -223,6 +269,46 @@
}


/* JANELA MODAL */
.janela {
width: 80%;
height: 80%;
display: flex;
}

.janela img {
width: 50%;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}

.janela > div {
padding: 30px;
height: 100%;
}

.janela h2 {
font-size: 3.5em;
}

.janela p {
font-size: 1.6em;
text-indent: 20px;
height: calc(706px - 253px);
}

.janela > div > div {
margin-bottom: 20px;
}

.janela > div > div a, .janela > div > button {
font-size: 1.5em;
width: 30%;
padding-top: 10px;
padding-bottom: 10px;
}


/* CONTATO */
#contato {
display: flex;
Expand Down
23 changes: 21 additions & 2 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@
color: white;
}

.no-scroll {
overflow: hidden;
}

body {
background-color: var(--preto);
font-family: var(--principal);
Expand Down Expand Up @@ -252,6 +256,12 @@ div.projeto button.btn:hover {


/* JANELAS MODAIS */
.fade, .janela {
transition: .5s;
opacity: 1;
pointer-events: all;
}

.janela {
background-color: var(--verde-claro);
position: fixed;
Expand All @@ -261,7 +271,7 @@ div.projeto button.btn:hover {
height: 100vh;
}

div.janela img {
.janela img {
width: 100%;
}

Expand Down Expand Up @@ -313,7 +323,7 @@ div.janela img {

.janela > div a.btn:hover {
color: black;
border: 2px solid black;
border: 4px solid black;
}

.janela > div button.btn:hover {
Expand All @@ -322,6 +332,15 @@ div.janela img {
width: 45%;
}

.hide {
opacity: 0;
pointer-events: none;
}

.janela.hide {
top: 0;
}



/* CONTATO */
Expand Down
32 changes: 19 additions & 13 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ <h1 class="titulo">Projetos</h1>
<h2>My Class</h2>
<p>Um site feito para professores, onde eles tem acesso aos alunos de sua turma, suas notas e médias, além de ser possível enviar aulas gravadas e atividades aos alunos.</p>
</div>
<button type="button" class="btn">Ver mais</button>
<button type="button" class="btn abrir_modal m1">Ver mais</button>
</div>
</div>

Expand All @@ -100,38 +100,40 @@ <h2>My Class</h2>
<h2>Luis Cartões</h2>
<p>Um site que vende serviços decartões de aniversários.</p>
</div>
<button type="button" class="btn">Ver mais</button>
<button type="button" class="btn abrir_modal m2">Ver mais</button>
</div>
</div>
</div>

<div class="container_janelas"> <!-- Container das Janelas Modais-->
<!-- <div class="janela">
<button type="button">Fechar</button>
<div class="fade hide"></div>

<div class="janela hide" id="m1">
<!-- <button type="button">Fechar</button> -->
<img src="imgs/projetos/my_class.PNG" alt="Imagem do Projeto My Class">
<div>
<h2>My Class</h2>
<p>Um site feito para professores, onde eles tem acesso aos alunos de sua turma, suas notas e médias, além de ser possível enviar aulas gravadas e atividades aos alunos.</p>
<div>
<a href="http://" target="_blank" class="btn">Ver Projeto</a>
<a href="http://" target="_blank" class="btn">Github</a>
<a href="https://joaovitordomingos.github.io/my-class/" target="_blank" class="btn">Ver Projeto</a>
<a href="https://github.com/JoaoVitorDomingos/my-class" target="_blank" class="btn">Github</a>
</div>
<button type="button" class="btn">Fechar</button>
<button type="button" class="btn fechar_modal">Fechar</button>
</div>
</div> -->
</div>

<!-- <div class="janela">
<div class="janela hide" id="m2">
<img src="imgs/projetos/luis_cartoes.PNG" alt="Imagem do Projeto Luis Cartões">
<div>
<h2>Luis Cartões</h2>
<p>Um site que vende serviços decartões de aniversários.</p>
<div>
<a href="http://" target="_blank" class="btn">Ver Projeto</a>
<a href="http://" target="_blank" class="btn">Github</a>
<a href="https://joaovitordomingos.github.io/luis-cartoes/" target="_blank" class="btn">Ver Projeto</a>
<a href="https://github.com/JoaoVitorDomingos/luis-cartoes" target="_blank" class="btn">Github</a>
</div>
<button type="button" class="btn">Fechar</button>
<button type="button" class="btn fechar_modal">Fechar</button>
</div>
</div> -->
</div>
</div>
</section>

Expand Down Expand Up @@ -163,5 +165,9 @@ <h1 class="titulo">Se interessou?</h1>
<footer>
<p>Feito por <a href="https://github.com/JoaoVitorDomingos" target="_blank"><strong>João Vitor C. Domingos</strong></a> - 2024</p>
</footer>


<!-- Script Principal -->
<script src="js/main.js"></script>
</body>
</html>
63 changes: 63 additions & 0 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
const body = document.querySelector("body")
const fade = document.querySelector(".fade")
let btnFecharModal = document.querySelectorAll(".fechar_modal")
let btnAbrirModal = document.querySelectorAll(".abrir_modal")
let modais = document.querySelectorAll(".janela")

let regexModal = /m[1-9]/

// console.log(body)
// console.log(fade)
// console.log(btnFecharModal)
// console.log(btnAbrirModal)

function FecharModal(evento) {
//console.log(evento)
if(evento.key === "Escape") {
modais.forEach(el => el.classList.add("hide"))
fade.classList.add("hide")
body.classList.remove("no-scroll")
body.removeEventListener("keyup", FecharModal)
}
}

btnAbrirModal.forEach(btn => {
btn.addEventListener("click", (evt) => {
//console.log("Este foi o botão clicado:")
//console.log(evt.target)
let classes = evt.target.classList
//console.log("Suas Classes")
//console.log(classes)


let i = 0
classes.forEach((classe, index) => {
if (regexModal.test(classe)) {
//console.log(regexModal.test(classe))
i = index
//console.log(i)
}
})

let modal = document.querySelector(`#${classes[i]}`)
//console.log(modal)

modal.classList.toggle("hide")
fade.classList.toggle("hide")
body.classList.add("no-scroll")

body.addEventListener("keyup", FecharModal)
})
})

btnFecharModal.forEach(btn => {
btn.addEventListener("click", ()=> {
modais.forEach(el => {
el.classList.add("hide")
fade.classList.add("hide")
body.classList.remove("no-scroll")
})

body.removeEventListener("keyup", FecharModal)
})
})

0 comments on commit fe52100

Please sign in to comment.