Как закрыть модальное окно при клике по экрану?

Question

[usedtoknow]

Всем привет!
у меня еще вопрос:

Я пытаюсь сделать модальное окно, чтобы оно вылезало при клике, а убиралось при клике вне ее границ, но почему-то оно не убирается, как я только не пробовал.

https://www.w3schools.com/code/tryit.asp?filename=...

пожалуйста, помогите. И еще, скажите, правильно ли это - совать само окно в список li (щелчок по нему должен провоцировать модальное окно) или само по себе модально окно обычно находится где-нибудь в конце файла ?

Спасибо

Comments

[Ankhena]

Закрытие окна с формой по клику мимо окна?

И еще, скажите, правильно ли это - совать само окно в список li

Нет не правильно, да и не за чем. Модальное окно - самостоятельный элемент.

[usedtoknow]

Ankhena, а куда его лучше записывать? в конец документа?

[Ankhena]

usedtoknow, да, отличное место. Либо в конец смыслового блока (например, section), если модальное окно неразрывно связано с этим блоком и без него никак не возможно.

[usedtoknow]

Ankhena, ну то есть все же, если у меня модальное окно должно быть чуть ниже шапки, а работать от ссылки в шапке, то лучше его запихать в конец блока шапки, да?

[Ankhena]

usedtoknow, если там форма заказа или форма обратной связи или схема проезда или еще что-то такое же универсальное, то я бы разместила перед закрывающим body

[usedtoknow]

Ankhena, а если это всплывающее окно регистрации, которое нужно прямо под ссылкой?

[Ankhena]

usedtoknow, ох
Ну слушайте, если у него позиционирование относительно этой ссылки, то естественно, вы его ни в какой конец body не запихнете, просто потому что не спозиционируете.
Короче, выведем такую зависимость: у кого relative, в конце того и пишите.

Как было бы хорошо, если бы из вопроса было однозначно понятно, что вам надо.

[usedtoknow]

Ankhena, о, спасибо)) немного не понятно с этим релэйтив, но это сработало, и окно встало точно под него))

[Ankhena]

usedtoknow, relative ставится тому, относительно чего позиционируют элемент с absolute

[usedtoknow]

Ankhena, понял спасибо)) а как в итоге его закрыть-то? знаете?))

[Ankhena]

usedtoknow, так в первом комментарии же ссылка
Закрытие окна с формой по клику мимо окна?

[Ankhena]

usedtoknow, вот прямо код оттуда https://jsfiddle.net/y3btkm6c/1/ с закрытием по клику мимо окна, по крестику или Esc

[usedtoknow]

Ankhena, спасибл большое! попытаюсь разобраться, как самому такое сделать заодно)

[usedtoknow]

Ankhena, привет еще раз! вроде разобрался с модальным окном, что Вы скинули, но теперь еще одна проблема:

когда нажимаешь на само модальное окно и с зажатой мышкой ведешь курсор за пределы окна, оно тоже закрывается, что совсем неудобно. Как исправить и сделать так, чтобы только клик за окном закрывал его?

[Ankhena]

usedtoknow, Замените событие на нужное learn.javascript.ru/mouse-clicks

[usedtoknow]

Ankhena, огромное спасибо! весь интернет облазил! а все оказалось так просто)

Answer 1

[AlexaZem]

Можно закинуть ваше модальное окно в какой нибудь оверлей, типа

<div class="overlay">
   <div class="your-dialog"></div>
</div>

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.your-dialog {
     z-index: 2;
}

Повесить на клик по .overlay - закрыть диалоговое окно.
на само окно - отмену всплытия событий (e.stopPropagation(), e.stopImediatePropagation)
Может где сделал опечатку, но идея думаю ясна

Comments

[Flying]

Должна быть position: fixed иначе поведение будет зависеть от контекста.

[AlexaZem]

Flying, да, fixed ошибся

Answer 2

[sdgroup14]

На работоспособность не проверял, но логика такая... Чтоб проверить по клику на сайт, что таргетом не является ваша кнопка и модалка

<style>
.modal {
  display: none
}

.modal.__show{
  display: block
}
</style>
<button type="button" class="btn">toggle Modal</button>

<div class="modal" >Modal text</div>

$('.btn').on('click', function(){
  $('.modal').toggleClass('__show');
})

$('body').on('click', function(e){
  if(e.target !== $('.modal') && e.target !== $('.btn') && $('.modal').hasClass('__show') ){
    $('.modal').removeClass('__show');
  }
})

Comments

[usedtoknow]

Честно говоря, я только учусь на JS, поэтому JQuery для меня еще не знаком :(

[sdgroup14]

Если вы учите. Мой совет. раз просмотрите все уроки. сделайте перерыв. Пусть ляжет в голову :). После этого эту же инфу снова прочитайте. и снова и снова... Пока сил хватит... Потом садитесь за jquey и работайте... он проще и короче.... На стартовом этапе вы все равно не ухватите чистый ванильный js со всеми прототипами.
Когда вы дойдете до прототипов вы уже будете с багажем знаний. а пока что мой совет jquery ))))))))

Answer 3

[alekseydemyanenko]

Все с коробки,
https://fancyapps.com/fancybox/3/

Answer 4

[Nebritbij]

Поищи в сети PopUp окна. Инфы много, + туда немного js и прикольные вещи получаются