How do I make the modal window close when I click on the area around the CSS window?

Faced with the problem that I do not know how to close the modal window when you click around this window, on the page itself, or for example, another element, also when you reload the page, the window remains and should disappear, tell me how you can implement this using only CSS? the code is attached

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    } 
    .overlay:target {
    visibility: visible;
    opacity: 1;
    }
    
    .popup {
    margin: 115px auto;
    width: 444px;
    height: 584px;
    background: #FFFFFF;
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.52);
    position: relative;
    transition: all 1s ease-in-out;
    }
    
    
         <div id="popup1" class="overlay">
            <div class="popup">
                <h2>Here i am</h2>
                <a class="close" href="#">&times;</a>
                <div class="content">
                    Thank to pop me out of that button, but now i'm done so you can close this window.
                </div> 
            </div>
        </div>

PS. for some reason, the transition property does not work, the block appears instantly, and sometimes smoothly if you just reload the page, tell me in what is the reason?

Author: Oleg NY, 2020-03-26
Source

2 answers

Example

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.popup:target {
  visibility: visible;
  opacity: 1;
}

.popup__overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.popup__box {
  margin: 115px auto;
  width: 444px;
  height: 584px;
  background: #FFFFFF;
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.52);
  position: relative;
}
<a href="#popup1" class="btn">Button open popup 1</a>

<div id="popup1" class="popup">
  <a href="#" class="popup__overlay"></a>
  <div class="popup__box">
    <h2>Here i am</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
      Thank to pop me out of that button, but now i'm done so you can close this window.
    </div>
  </div>
</div>
 5
Author: soledar10, 2020-03-26 11:32:25

To display and hide the modal window, it is more correct to use the display: none; property, which completely excludes the element. And in order to hide the window, you can make a separate block that will be the entire width, put z-index lower than the modal window itself. Next, when you click on this block, you can hide the entire modal window, this can be done via JS.

Transition doesn't work because you're applying it to the wrong block, and if you just want to display it smoothly the block then in jQuery has beautiful properties: .fadeIn() .fadeOut() .fadeToggle(). You can find information about them on the Internet

 0
Author: DmitryDevelop, 2020-03-26 11:25:52