模态不显示 bulma css

Question

我想在单击按钮但不起作用时显示模式。这里是代码：

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

Answer 1

在开始之前，打开模态的简单方法应该是这样的；

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

现在，我们可以聆听以上事件。

监听 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")
})

让我们看一下这个简单的片段

yourElem.classList.toggle('is-active')

var event = new Event('modal:show')

yourElem.dispatchEvent(event);

希望这个回答对布尔玛新手有所帮助。