Close modal by clicking outside the box

Question

Can I use simple css to close modal by clicking outside the box? I have seen examples of how to do it using jQuery/JavaScript. I have it set up right now so that it closes when clicking the 'x' and no JavaScript is being used:

<div><a href="#close" title="Close" class="close">X</a></div> And then in my css file:

.close {
 opacity: 10px;
 background-color: darkblue;
 color: #FFFFFF;
 line-height: 25px;
 position: absolute;
 right: -12px;
 text-align: center;
 top: -10px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}

score 1 · Answer 1 · answered Feb 09 '16 at 21:21

1

This can't be accomplished with just plain CSS.

Javascript is there to make your page dynamic and reactive, so you should be using it to listen for events and for manipulating what is shown to the user.

answered Feb 09 '16 at 21:21

Tennyson H

1,705
15
28

I feel like this response would work better as a comment, rather than its own answer – Nick Zuber Feb 09 '16 at 21:23
1

@Nick It's not a comment, it's the answer to the question Mahmud asked? Q: "Can I use css to..." – Tennyson H Feb 09 '16 at 21:25

score 1 · Answer 2 · answered Feb 09 '16 at 21:28

Rather than using CSS you could use a button that calls a Javascript function to open the modal like so:

jQuery:

<button id="modal-button" onclick="openModal();">Open Modal</button>

HTML:

<script>

function openModal()
{
    $('#myModal').modal('show');
}

</script>

Using this method you will be able to click off the modal to close it.

ezattilabatyi · Answer 3 · 2016-02-10T00:35:49.637

If you can alter the html and place a hidden checkbox and an extra overlay before the modal, then yes, I have a solution for you.

HTML

<input type="checkbox" id="modal-toggle" class="modal-toggle" />
<label for="modal-toggle" class="modal-overlay"></label>
<div class="modal">
    <label for="modal-toggle" class="modal-close-button">X</label>
</div>

CSS

.modal-toggle,
.modal-overlay,
.modal {
    display: none;
}

.modal-toggle:checked + .modal-overlay,
.modal-toggle:checked + .modal-overlay + .modal {
    display: block;
}

.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.modal {
    position: absolute;
    /* I've used absolute here to note that the modal can't be static */
    /* add other properties to position this div */
    z-index: 2;
}

From w3schools.com:

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

How does it work? We have a hidden overlay and modal right after an input. When this input gets checked the overlay and modal will be shown. The overlay and the close button are the labels of the checkbox so clicking on these will uncheck the input, thus hides the modal. You will need another label somewhere in your html which will bring up the modal of course.

You can read about the "+" css selector here.

Full list of css selectors

You can use multiple modals on the same page, just make sure every modal has its own unique id and for attribute value. The question didn't mention if the modal has to be animated on show/hide, that is possible too.

score 0 · Answer 4 · answered Feb 17 '17 at 15:35

you can close the div by clicking out side

add this code to your js file or inside your <script> </script> tag

replace the ID_OF_DIV with id of the div you want to close

document.body.addEventListener("click", function() {
    var element = document.getElementById("ID_OF_DIV");
    if (element) {
        element.style.display = "none";
    }
});

Close modal by clicking outside the box

4 Answers4

Linked