Как исправить код?

Question

[lavezzi1]

Здравствуйте!
Вытащил модальное окно из Bootstrap. Но нужно, обязательно(!) чтобы само окно было обернуто в два дива, как в моей верстке. При таком расскладе не работает закрытие модального окна по клику по спец. области .modal-backdrop. Почему? Помогите пожалуйста это исправить. Что нужно изменить в js?

codepen.io/anon/pen/GoGpBG

Comments

[Stalker_RED]

У вас table и cell поверх backdrop-a
можно перевесить обработчик на них.

[lavezzi1]

Stalker_RED: Можете помочь, я ссылку на кодепен прикрепил.

Answer 1

[Андрей]

Посмотрел бегло и не смог найти .modal-backdrop, ни в коде, ни в DOM... Может потому и не срабатывает?

Вообще что имеется в виду под спец.областью .modal-backdrop ?

Патч решающий данную проблему там: codepen.io/anon/pen/LGBPyv

Comments

[lavezzi1]

В DOM он создается когда модальное окно открывается, а стили я и правда забыл дописать. Но на рабочем примере у меня на пк, стили написаны и тут 100% дело в последовательности, то есть к структуре. Всему виной два дива который я добавил, как вы и писали в предю сообщении

[Андрей]

lavezzi1: Проблему удалось решить? Если меняется положение элемента в дереве ДОМ, то надо, соответственно, менять и селектор...

[lavezzi1]

iCoderXXI: Нет, я в js не силен. Этот код очень завязан на структуре модального окна. Можно было бы наверное поменять селекторы с backdrop на .modal__table, но в коде есть функция которая создает backdrop. В общем не по силам мне это.

[Андрей]

lavezzi1: я так понимаю Вы больше по дизайну. Я пока к бутстрапу только присматриваюсь, так-что с ходу решения не скажу. Опишите суть проблемы подробнее, что конкретно не срабатывает? Я подозреваю что модальное окно должно закрываться при клике на затеняющий блок?

[lavezzi1]

Андрей: Все верно понимаете.
Задача: закрытие модального окна при клике за его пределами. В стандартном исполнение бутстрапа при открытие окна создается класс .backdrop с position: fixed и z-index ровно под окно, что делает его кликабельным при открытом модальном окне. Когда оборачиваешь все в дивы (как в моем случае), этот вариант с .backdrop перестает работать.

[Андрей]

lavezzi1: Нашел я наконец в DOM этот ваш modal-backdrop, сейчас гляну что там с JS

[Андрей]

lavezzi1: а в какие элементы модальное окно завернуто?

[lavezzi1]

В .modal__table и .modal__cell же. В примере на codepen все есть)

[Андрей]

lavezzi1: да я их там вижу, просто говорю же с бутстрапом пока не очень знаком, поэтому уточнил. В общем modal__cell ловит клик вне модала, боюсь что там переделывать кода слишком заморочно, насколько вот прям непреодолимо нужно обязательно завернуть модал в эти 2 элемента?

[Андрей]

lavezzi1: у вас, как было написано в первом каменте, table и cell перекрывают всю область видимости и находятся поверх дропа... Надо действительно либо на них повесить отлов эвента, либо если возможно уменьшить их размер до размера модала, чтобы клик дроп ловил...

[lavezzi1]

Андрей: Эти два дива выполняют функцию центровки окна по центру, причем кроссбраузерно. Как без них отцентровать? Без translate

[Андрей]

lavezzi1: Суть проблемы в том, что модал в таком случае является потомком обертки, и либо надо всунуть бэкдроп внутрь обертки так же (по дефолту он закидывается к body в 71-й строке, еще в 185-й строке и возможно в других местах), либо же ловить клик не бэкдропом, а оберткой...

[Андрей]

lavezzi1: Как вариант поискать способ центрации через CSS и применять его к .modal-dialog

[lavezzi1]

Андрей: Я понял. Спасибо за уделенное время в любом случае. В очередной раз понял что с бутстрапом лучше не пользоватся. Ибо код очень завязан на их верстке и очень быстро приходит в неподдерживаемый вид https://gist.github.com/iAdramelk/d328b73c72cab92ef95f

[Андрей]

lavezzi1: В общем пропатчил я код, теперь модал закрывается по клику на бэкдроп codepen.io/anon/pen/LGBPyv

[lavezzi1]

Андрей: Гениально просто :) Спасибо!

[Андрей]

lavezzi1: О даааа... :) Не знаю лучше ли Zurb Foundation в этом плане... Я все больше по части кода. :)

[lavezzi1]

Андрей: Вы что то кроме .appendTo(this.$modal__cell) меняли?

[Андрей]

css:

.modal-dialog {
z-index: 1050;
}

js:

строка 11 - this.$modal__cell = $(element).find('.modal__cell')
строка 194 -

if (e.target.className == 'modal-backdrop fade in') {
if (this.options.backdrop == 'static') {
return this.$element[0].focus();
} else {
return this.hide();
}
}

[Андрей]

lavezzi1: frontender.info/centering-css-complete-guide