单击框外单击关闭模态

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;
}

Answer 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.

Answer 2

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.

Answer 3

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.

Answer 4

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";
    }
});