Ir ao conteúdo
  • Cadastre-se

HTML Como centralizar box model e deixar responsivo


Ir à solução Resolvido por Marcelo Calazans,

Posts recomendados

Boa tarde!

 

Criei uma box modal, mas tenho alguns problemas:

- não consigo deixar o modal (responsivo)

- não consigo centralizar verticalmente o modal (preciso que centralize conforme o aparelho (desktop, tablet e celular).

 

 

segue o código:

 

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <title>Modal</title>

    <style>
        .modal-wrap {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 99999;
            opacity: 0;
            -webkit-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }

        .modal-wrap:target {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-wrap>div {
            width: 560px;
            position: relative;
            margin: 0 auto;
            padding: 20px 10px;
            background: #fff;
        }

        .modal-content__descript {
            display: block;
            width: 100%;
        }

        .modal-content__descript p {
            color: #666;
            font-size: 12px;
            margin: 10px 0;
            height: 50px;
            padding: 30px 10px;
        }

        .close {
            position: absolute;
            width: 30px;
            right: 20px;
            top: 20px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            color: #333;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div>
        <a href="#code-1">acessar modal</a>
    </div>
    
    

    <div class="modal">
        <div id="code-1" class="modal-wrap">

            <div class="modal-content">

                <div class="modal-content__descript">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in not only five</p>
                </div>

                <a href="#close" title="Fechar" class="close"><i class="faz fa-times"></i></a>

            </div>

        </div>
    </div>

</body>

</html>




 Desde já muito obrigado
 

 

Link para o comentário
Compartilhar em outros sites

  • Solução

@EddK

Olá colega.

 

Deixei o box centralizado para você, e estou mostrando como deixar o box responsivo usando CSS Media Queries ( https://www.w3schools.com/css/css3_mediaqueries_ex.asp ). 

 

Agora cabe a você acertar o texto dentro do box usando a mesma ideia do Media Queries.

 

Existiria outras formas de deixar o box responsivo, mas no desenvolvimento web é difícil fugir totalmente das Media Queries, e elas são muito úteis.

 

Segue o código:

 

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <title>Modal</title>

<style>
        .modal-wrap {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 99999;
            opacity: 0;
            -webkit-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }

        .modal-wrap:target {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-wrap>div {
            width: 560px;
            position: absolute;
            top: 50%;
            left: 50%;            
            transform: translate(-50%, -50%);
            padding: 20px 10px;
            background: #fff;
        }

        .modal-content__descript {
            display: block;
            width: 100%;
        }

        .modal-content__descript p {
            color: #666;
            font-size: 12px;
            margin: 10px 0;
            height: 50px;
            padding: 30px 10px;
        }

        .close {
            position: absolute;
            width: 30px;
            right: 20px;
            top: 20px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            color: #333;
            text-decoration: none;
        }
@media (max-width: 1367px){
.modal-wrap>div {
  width: 480px;            
}
}

@media (max-width: 1150px){
.modal-wrap>div {
  width: 400px;            
}
}

@media (max-width: 901px){
.modal-wrap>div {
  width: 380px;            
}
}

@media (max-width: 640px){
.modal-wrap>div {
  width: 350px;            
}
}

@media (max-width: 480px){
.modal-wrap>div {
  width: 320px;            
}
}

@media (max-width: 360px){
.modal-wrap>div {
  width: 300px;            
}
}

@media (max-width: 320px){
.modal-wrap>div {
  width: 280px;            
}
}
      
</style>
    
</head>

<body>
    <div>
        <a href="#code-1">acessar modal</a>
    </div>
    
    

    <div class="modal">
        <div id="code-1" class="modal-wrap">

            <div class="modal-content">

                <div class="modal-content__descript">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in not only five</p>
                </div>

                <a href="#close" title="Fechar" class="close"><i class="faz fa-times"></i></a>

            </div>

        </div>
    </div>

</body>

</html>

 

 

Abraços.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@EddK

 

 

24 minutos atrás, EddK disse:

@Marcelo Calazans

Você sabe como centralizar o box modal na vertical?

 

 

Mas ele já está centralizado na vertical e na horizontal, como eu havia dito acima.

 

Ele está assim:

 

 

center.thumb.jpg.78a4f506a40cfddf4cf0ee46a2f7189a.jpg

 

Eu usei a mesma técnica utilizada no exemplo abaixo do Chris Coyier

 

https://codepen.io/chriscoyier/pen/BvdgL


Abraços colega.

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Redes-Wi-Fi-capa-3d-newsletter.png

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!