Jump to content

Pop Up apenas com html e css


Jmc2020

Recommended Posts

Boa noite pessoal espero que estejam todos bem!!!

Estou a tentar criar um popup apenas com html e css e, embora já tenho conseguido em parte, sempre que dou refresh à página o popup aparece por breves segundos...

Estes são os códigos que tenho, tanto css e html:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"><meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="QuemSomos.css">
    <title>Quem Somos</title> 
</head>
<body>
    <header class="header">
        <nav>
            <a href="#"><img class="logo" src="#" alt="Foto da Loja"></a>
            <ul class="headerLinks">
                <li class="headerLI"><a href="#">Página Inicial</a></li>
                <li class="headerLI"><a class="selecionado" href="#">Quem Somos</a></li>
                <li class="headerLI"><a href="#">Login</a></li>
            </ul>
        </nav>
    </header>


        <br><br>
    <footer class="footer">
        <ul class="footerLinks">
            <li class="footerCTG"><a href="#">FPS</a></li>
            <li class="footerCTG"><a href="#">RPG</a></li>
            <li class="footerCTG"><a href="#">Desporto</a></li>
            <li class="footerCTG"><a href="#">Sobrevivência</a></li>
        </ul>
        <ul class="footerLinks2">
            <li class="footerCTG"><a href="#">Estratégia</a></li>
            <li class="footerCTG"><a href="#">Corrida</a></li>
            <li class="footerCTG"><a href="#">Simulação</a></li>
        </ul>
        <ul class="footerLinksCtc">
            <li class="footerCTG"><a class="butaoPopup" href="#">Contactos:</a></li>
            <div id="popup1" class="overlay">
                <div class="popup">
                    <h2>Contactos:</h2>
                    <a class="fechar" href="#">&times;</a>
                    <div class="conteudo">
                        Nº de Telémovel: [...]
                        <br>
                        Email: [...]
                    </div>
                </div>
            </div>
        </ul>
        <ul class="footer_imagem">
            <li class="footerIMG"><img class="IPSIMG" src="ESTS.png" alt="Localização da loja"></li>
        </ul>
    </footer>
</body>
</html>

CSS:

body{
    font-family: verdana;
    margin: 0;
}

/* Header */
.header{
    margin: 5px;
    background-color: gray;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    height: 80px;
}
.logo{
    float: left;
    margin: 0;
    padding: 0;
    max-width: 95px;
    height: auto;
}
ul.headerLinks{
    float: right;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li.headerLI{
    float: left;
    margin: 0;
    padding: 20px 20px 3px 3px;
}
li a{
    display: inline-flex;
    color: white;
    text-align: center;
    padding: 12px 14px;
    border-radius: 5px;
    text-decoration: none;
}
li a.selecionado{
    background-color: darkred;
}
li a:hover:not(.selecionado){
    background-color: darkred;
}
/* Fim do header */



/* Footer */
.footer{
    margin: 5px;
    background-color: gray;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    height: 250px;
}
ul.footerLinks{
    float: left;
    text-align: left;
    list-style-type: none;
    margin: 5px;
    margin-left: 100px;
    padding-top: 40px;
    padding-right: 1px;
    padding-left: 25px;
    padding-bottom: 10px;
    overflow: hidden;
}
ul.footerLinks2{
    float: left;
    text-align: left;
    list-style-type: none;
    margin: 5px;
    margin-left: 15px;
    padding-top: 85px;
    padding-left: 1px;
    padding-right: 25px;
    padding-bottom: 10px;
    overflow: hidden;
}
ul.footerLinksCtc{
    float: left;
    text-align: left;
    list-style-type: none;
    margin: 5px;
    margin-left: 15px;
    padding-top: 170px;
    padding-left: 1px;
    padding-right: 25px;
    overflow: hidden;
    
}
.butaoPopup{
    cursor: pointer;
}
.overlay{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}
.overlay:target{
    visibility: visible;
    opacity: 1;
}
.popup{
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 0.5s ease-in-out;
}
.popup h2{
    margin-top: 0;
    color: #333;
    font-family: verdana;
}
.popup .fechar{
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.popup .fechar:hover{
    color: darkred;
}
.popup .conteudo{
    max-height: 30%;
    overflow: auto;
}

@media screen and (max-width: 700px){
    .footerCTG{
        width: 70%;
    }
    .popup{
        width: 70%;
    }
}
ul.footer_imagem{
    float: right;
    list-style-type: none;
    margin: 5px;
    margin-left: 15px;
    padding-top: 50px;
    padding-left: 1px;
    padding-right: 200px;
    padding-bottom: 50px;
    overflow: hidden;
}
img.IPSIMG{
    border-radius: 15px;
    margin: 0;
    padding: 0;
    max-width: 150px;
    height: auto;
}
/* Fim do Footer */

Para já ainda só tenho o footer e header, entrentanto vou adiantar o main content.

Desde já peço desculpa pela mensagem tão grande.

Em relação ao problema, se me puderem ajudar agradecia imenso!!!

Cumprimentos e mantenham-se seguros :)

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.