How to align the close button of the pop-up window?

Asked

Viewed 685 times

0

I’m creating a pop-up window in CSS, but the close button is not inside the element where it displays the advertisement in the pop-up. The button is in the far left corner of the site.

Note below my pop-up, you’re right. However, check the top left corner of the site (X) to close the pop-up advertisement.

How to make the close button stay located in the top right corner of the 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;
}
css

  • you are using Bootstrap ?

  • @Thiagofriedman no! Css only.

  • Maybe this jsFiddle help you get the expected result.

  • @Gladison I advise you to use Bootstrap modal, simpler and more efficient, here’s an example, https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery

  • @Mathiasfalci I prefer to adjust this code I use.

2 answers

1


Next, you take the Fixed position, because it does not behave well based on containers, all the properties you put in the image should be applied in the container, because the image should only be resized based on it, with some adjustments, can-the expected result is obtained...

Edit: You wanted a responsive solution too. follow the code

--

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>

  • The image is leaving the bounding space, how to leave it within the space bounded by the margin?

  • add 'overflow: Hidden;' in 'figure.pop-up-main'

  • This code of yours didn’t work! By including it, some CSS structures of the rest of the site were not configured.

  • should be by the img tag in css, add a class to the modal central image and call it by css

  • Image is not adjusted to work resizing together with figure

  • I don’t understand anything

  • Let’s go continue this discussion in chat.

Show 2 more comments

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>

That’s what you need?

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.