我想在单击按钮但不起作用时显示模式。这里的代码:
<button class="button is-warning is-pulled-right" onclick="refs.modalEdicion.open()">
<span>Editar</span>
</button>
<div class="modal" id="modalEdicion">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="">
</p>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
最佳答案
在开始之前,打开模式的简单方法应该是这样的;
yourElem.classList.toggle('is-active')
在我的元素中,我有很多模态框。所以我并不总是想像上面那样使用。因此,我创建了一个基本的模态事件监听器。我知道这对你来说还不够。因为还会有其他情况打开和关闭modals。
在这种情况下,您可以打开和关闭模态框,甚至可以收听显示和关闭事件。
我用了this用于创建自定义事件的 Mozilla 资源。例如,您要创建两个名为 modal:show 和 modal:close 的事件。为此,您应该编写如下代码:
展会事件
var event = new Event('modal:show')
yourElem.dispatchEvent(event);
关闭事件
var event = new Event('modal:close')
yourElem.dispatchEvent(event);
现在,我们可以监听上面的事件了。
监听Show事件的例子
yourElem.addEventListener('modal:show', function() {
console.log("opened")
})
监听关闭事件的例子
yourElem.addEventListener("modal:close", function() {
console.log("closed")
})
我们知道如何从简易方法部分打开和关闭模态。但有时用户可以单击模态背景或“X” 或取消 按钮。如果是这样,我们需要处理这些事件。为此,我们可以使用此代码
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>
我希望这个答案对 bool 玛新手有帮助。
关于html - 模态不显示 bulma css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50081656/