Close Div by click outside

No more document.addEventListener(‘click’, …)

Allen Kim

·

Follow

Published in

Digital-Heart

·

2 min read

·

May 10, 2019

--

2

Share

1. Create a button to open a popup and a popup itself

<button onclick="showPopup()">Open Popup</button><div class="popup">
  <div class="blocker" onclick="hidePopup()"></div>
  <div class="contents">This is popup</div>
</div>

2. Now style it

.popup { display: none; }
.popup.open { display: block; }.blocker {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: ' ';
    background: rgba(0,0,0,.5);
}
.popup .contents {
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}

3. Add Javascript open/close the popup

<script>
const popup = document.querySelector('.popup');
function showPopup() {
  popup.classList.add('open');
}
function…