html - 模态不显示 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')

在我的元素中，我有很多模态框。所以我并不总是想像上面那样使用。因此，我创建了一个基本的模态事件监听器。我知道这对你来说还不够。因为还会有其他情况打开和关闭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 玛新手有帮助。