Close modal, нажав вне коробки

Question

Могу ли я использовать простой css для закрытия модального, щелкнув вне коробки? Я видел примеры того, как это сделать, используя jQuery/JavaScript. У меня он установлен прямо сейчас, так что он закрывается при нажатии на «х» и ни JavaScript не используется:

<div><a href="#close" title="Close" class="close">X</a></div> , а затем в моем CSS файл:

.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

Это не может быть достигнуто с простым CSS.

Javascript должен сделать вашу страницу динамичной и реактивной, поэтому вы должны использовать ее для прослушивания событий и для управления тем, что показано пользователю.

Answer 2

Вместо использования CSS вы можете использовать кнопку, которая вызывает функцию Javascript, чтобы открыть модальное так:

JQuery:

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

HTML:

<script> 

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

</script> 

Используя этот метод вы сможете щелкнуть модальный, чтобы закрыть его.

Answer 3

Если вы можете изменить html и поместить скрытый checkbox и дополнительный оверлей перед модальным, то да, у меня есть решение для вас.

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

От w3schools.com:

Примечание: г-индекс работает только на расположенные элементы (позиции: абсолютное, положение: относительное или положение :исправлено).

Как это работает? У нас есть скрытый оверлей и модальный справа после ввода. Когда этот вход будет проверен, будет отображаться оверлей и модальный. Оверлей и кнопка закрытия - это ярлыки флажка, поэтому при нажатии на них снимите флажок с ввода, таким образом, скрывает модальный. Вам понадобится еще один ярлык где-нибудь в вашем html, который, конечно же, вызовет модальность.

Вы можете прочитать о "+" css selector here.

Full list of css selectors

Вы можете использовать несколько модальности на той же странице, просто убедитесь, что каждый модальный имеет свое собственное значение атрибута уникальный id и for. В вопросе не упоминалось, должен ли модальный быть анимированным в show/hide, что тоже возможно.

Answer 4

вы можете закрыть DIV нажав из стороны

добавить этот код в файл JS или внутри <script> </script> тега

заменить ID_OF_DIV с идентификатором DIV вы хотите закрыть

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