Перед запуском простой способ открыть модал должен быть таким:
yourElem.classList.toggle('is-active')
В моем проекте у меня много модальностей. Поэтому я не всегда хотел использовать как выше. Из-за этого я создал базовый модальный приемник событий. Я знаю, что этого недостаточно для тебя. Потому что будут другие ситуации, чтобы открывать и закрывать модалы.
В этом случае вы можете открывать и закрывать ваши модалы, даже если вы можете слушать шоу и закрывать события.
Я использовал этот ресурс Mozilla для создания пользовательских событий. Например, вы хотите создать два события с именем modal: show и modal: close . Чтобы сделать это, вы должны написать несколько кодов, как показано ниже:
Событие на выставке
var event = new Event('modal:show')
yourElem.dispatchEvent(event);
При закрытии события
var event = new Event('modal:close')
yourElem.dispatchEvent(event);
Теперь мы можем слушать вышеописанные события.
Пример прослушивания для показа события
yourElem.addEventListener('modal:show', function() {
console.log("opened")
})
Пример прослушивания события закрытия
yourElem.addEventListener("modal:close", function() {
console.log("closed")
})
Мы знаем, как открывать и закрывать модал из раздела «Легкий путь». Но иногда пользователи могут щелкнуть модальный фон или кнопки "X" или Cancel . Если это так, нам нужно обработать эти события. Для этого мы можем использовать этот код
var modalClose = yourelem.querySelectorAll("[data-bulma-modal='close'],
.modal-background")
modalClose.forEach(function(e) {
e.addEventListener("click", function() {
yourelem.classList.toggle('is-active')
var event = new Event('modal:close')
yourelem.dispatchEvent(event);
})
})
Вот и все. Мы знаем, как открыть или закрыть мод Bulma. Даже мы можем слушать их шоу и близкие события. Давайте сделаем это немного проще
Создание класса BulmaModal
class BulmaModal {
constructor(selector) {
this.elem = document.querySelector(selector)
this.close_data()
}
show() {
this.elem.classList.toggle('is-active')
this.on_show()
}
close() {
this.elem.classList.toggle('is-active')
this.on_close()
}
close_data() {
var modalClose = this.elem.querySelectorAll("[data-bulma-modal='close'],
.modal-background")
var that = this
modalClose.forEach(function(e) {
e.addEventListener("click", function() {
that.elem.classList.toggle('is-active')
var event = new Event('modal:close')
that.elem.dispatchEvent(event);
})
})
}
on_show() {
var event = new Event('modal:show')
this.elem.dispatchEvent(event);
}
on_close() {
var event = new Event('modal:close')
this.elem.dispatchEvent(event);
}
addEventListener(event, callback) {
this.elem.addEventListener(event, callback)
}
}
Использование
var btn = document.querySelector("#btn")
var mdl = new BulmaModal("#myModal")
btn.addEventListener("click", function () {
mdl.show()
})
mdl.addEventListener('modal:show', function() {
console.log("opened")
})
mdl.addEventListener("modal:close", function() {
console.log("closed")
})
Давайте посмотрим на этот простой фрагмент
class BulmaModal {
constructor(selector) {
this.elem = document.querySelector(selector)
this.close_data()
}
show() {
this.elem.classList.toggle('is-active')
this.on_show()
}
close() {
this.elem.classList.toggle('is-active')
this.on_close()
}
close_data() {
var modalClose = this.elem.querySelectorAll("[data-bulma-modal='close'], .modal-background")
var that = this
modalClose.forEach(function(e) {
e.addEventListener("click", function() {
that.elem.classList.toggle('is-active')
var event = new Event('modal:close')
that.elem.dispatchEvent(event);
})
})
}
on_show() {
var event = new Event('modal:show')
this.elem.dispatchEvent(event);
}
on_close() {
var event = new Event('modal:close')
this.elem.dispatchEvent(event);
}
addEventListener(event, callback) {
this.elem.addEventListener(event, callback)
}
}
var btn = document.querySelector("#btn")
var mdl = new BulmaModal("#myModal")
btn.addEventListener("click", function () {
mdl.show()
})
mdl.addEventListener('modal:show', function() {
console.log("opened")
})
mdl.addEventListener("modal:close", function() {
console.log("closed")
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<div class="modal" id="myModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close" data-bulma-modal="close"></button>
</header>
<section class="modal-card-body">
<p>There is something here</p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button" data-bulma-modal="close">Cancel</button>
</footer>
</div>
</div>
<button id="btn">Click active Modal</button>
Надеюсь, этот ответ поможет новичкам Булмы.