0

Estou criando uma janela pop-up em CSS, porém o botão para fechar não fica dentro do elemento onde exibe a propaganda na pop-up. O botão fica no canto extremo esquerdo do site.

Observe abaixo minha pop-up, está certa. Porém, veja no canto superior esquerdo do site o (X) para fechar a propaganda pop-up.

Como fazer o botão fechar ficar localizado na quina superior direita da pop-up?

inserir a descrição da imagem aqui

HTML

<figure class="pop-up-principal">
    <span id="close">&times;</span>
    <img src="./imagens-pop-up/drbrunomachado.jpg">
</figure>

CSS

figure.pop-up-principal img{
    position: fixed;
    width: 100%;
    max-width: 378px;
    max-height: 283px;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: white;
    border-radius: 10px;
    border: 5px solid #9AD3DE;
    box-sizing: border-box;
    z-index: 9999;
}

#close{
  position: fixed;
  float: right;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 25px;
  border-radius: 50%;
  color: #EF5350;
  border:2px solid #EF9A9A;
}
5

2 Respostas 2

1

Seguinte, você de tirar o position fixed, pois ele não se comporta bem com base em containeres, todas as propriedades que você colocou na imagem deveriam ser aplicadas no container, pois a imagem somente deve ser redimencionada com base no mesmo, com alguns ajustes, pode-se obter o resultado esperado...

Edit: Você queria uma solução responsiva também. segue o código

--

figure.pop-up-principal {
    position: absolute;
    width: 100%;
    max-width: 430px;
    max-height: 283px;
    height: auto;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
figure.pop-up-principal img{
    position: absolute;
    width: 100%;
    max-width: 430px;
    max-height: 283px;
    height: auto;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: white;
    border-radius: 10px;
    border: 5px solid #9AD3DE;
    box-sizing: border-box;
    z-index: 0;
    overflow: hidden;
}
#close{
  float: right;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 25px;
  border-radius: 50%;
  color: black;
  border:2px solid #EF9A9A;
  background-color: red;
  text-align: center;
  position: relative;
  z-index: 100;
  margin-right: 5px;
  margin-top: 6px;
}
<figure class="pop-up-principal">
    <span id="close">&times;</span>
    <img src="https://cdn.pixabay.com/photo/2014/07/27/13/49/tree-402953__340.jpg">
</figure>

7
  • A imagem está saindo do espaço delimitando, como deixá-la dentro do espaço delimitado pela margem?
    – Gladison
    24/07/2017 às 12:58
  • adicione 'overflow: hidden;' em 'figure.pop-up-principal' 24/07/2017 às 13:04
  • Este seu código não funcionou! Ao incluí-lo, algumas estruturas CSS do restante do site ficaram desconfiguradas.
    – Gladison
    24/07/2017 às 13:10
  • deve ser pela tag img no css, adicione uma classe para a imagem central do modal e chame a mesma pelo css 24/07/2017 às 13:14
  • A imagem não está ajustada para trabalhar o redimensionamento junto com figure
    – Gladison
    24/07/2017 às 13:20
0

figure.pop-up-principal img{
    position: fixed;
    width: 100%;
    max-width: 378px;
    max-height: 283px;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: white;
    border-radius: 10px;
    border: 5px solid #9AD3DE;
    box-sizing: border-box;
    z-index: 9999;
}

#close{
  position: absolute;
  float: right;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 25px;
  border-radius: 50%;
  color: #EF5350;
  right: 0; 
  border:2px solid #EF9A9A;
    z-index: 9999999999;
}
<figure class="pop-up-principal">
    <span id="close">X</span>
    <img src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg">
</figure>

É isso que você precisa?

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .