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

Bulma CSS是一个仅限CSS的框架，所有的javascript行为都必须手动编写。这意味着对于模态，所有用于隐藏和显示模态的CSS类都已编写，您必须正确绑定事件。如果您访问模态文档页面（https://bulma.io/documentation/components/modal/），则可以看到No Javascript警告，指出

Bulma不包含任何JavaScript互动。你不得不实现课程自我切换。

只需定义refs.modalEdicion.open函数，根据doc添加类is-active，并在关闭按钮上绑定事件以删除相同的CSS类。您可以选择将事件绑定到overlay元素，如果您想通过单击叠加层来关闭模式。

这是所需的实现。 https://codepen.io/anon/pen/KRaqxG

Answer 2

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

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

在我的项目中，我有很多模态。所以我并不总是想要像上面那样使用。因此，我创建了一个基本的模式事件侦听器。我知道这还不够。因为还会有其他情况打开和关闭模式。

在这种情况下，即使您可以收听显示和关闭事件，也可以打开和关闭模态。

我使用了this 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” 或取消按钮。如果是这样，我们需要处理这些事件。为此，我们可以使用以下代码

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

仅此而已。我们知道如何打开或关闭布尔玛模态。甚至我们都可以收听他们的演出和闭幕式。让我们简化一点

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

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

Answer 3

首先，你需要发布你的javascript和css以获得相关的答案，但我会概述我的方式。

你可以实现如下：

//One Modal
function OpenModal() {
    //Get element with Id= "modal"
    var modal = document.getElementById("modal");
    //Change style to display = "block"
    modal.style.display = "block";
}

//Multiple Modals
function OpenMore(n) {
    //Get elements with class="modal" into an array
    var modal = document.getElementsByClassName("modal");
    //Change style of modal number [n] to display = "block"
    modal[n].style.display = "block";
}

//This will close the modal once you click on it
window.onclick = function(event) {

    //For single modal
    var modal = document.getElementById("modal");
    //If the click was on the modal the modal style display = "none"
    if (event.target == modal) {
        modal.style.display = "none";
    }

    //For multiple modals
    var more = document.getElementsByClassName("modal");
    //i represents which modal. It will go through all modals
    for (var i = 0; i < more.length; i++) {
        //If the click was on the modal for one of the modals display = "none"
        //for all of them
        if (event.target == more[i]) {
            more[i].style.display = "none";
        }
    }
}

.modal {
    display: none;
    background-color: yellow;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
}
#modal {
    display: none;
    background-color: yellow;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
}
.button {
    margin: 50px auto;
}

<!-- For One Modal --> 
<button class="button" onclick="OpenModal()"> SingleModal </button>
<div id="modal"> hardidar </div>

<!-- For Multiple Modals -->
<button class="button" onclick="OpenMore(0)"> MultipleModal1 </button>
<div class="modal"> 1st Modal </div>

<button class="button" onclick="OpenMore(1)"> MultipleModal2 </button> 
<div class="modal"> 2nd Modal </div>

我们的想法是，一旦您点击Javascript方法将运行的按钮并将其更改为display: none

，每个css规则的模态的初始显示为display:block

您可以更改此行为以执行相当多操作。您可以切换一个类，您可以更改transform: scale()这是我个人的偏好。

这个例子是一个有效的例子。

Answer 4

这周我遇到了这个问题，发现了这个link。它包含官方的（根据它）布尔玛模态文档页面的javascript代码。我将其复制并减少了一两行，它适用于您的代码中将具有的所有布尔模式。

请注意，这是相当开放的代码。 Ali的答案是遵循的理想途径，但是如果您不想花时间编写模态代码，则只需将此段复制到代码中即可。

document.addEventListener('DOMContentLoaded', function () {

    // Modals

    var rootEl = document.documentElement;
    var allModals = getAll('.modal');
    var modalButtons = getAll('.modal-button');
    var modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');

    if (modalButtons.length > 0) {
        modalButtons.forEach(function (el) {
            el.addEventListener('click', function () {
                var target = document.getElementById(el.dataset.target);
                rootEl.classList.add('is-clipped');
                target.classList.add('is-active');
            });
        });
    }

    if (modalCloses.length > 0) {
        modalCloses.forEach(function (el) {
            el.addEventListener('click', function () {
                closeModals();
            });
        });
    }

    document.addEventListener('keydown', function (event) {
        var e = event || window.event;
        if (e.keyCode === 27) {
            closeModals();
        }
    });

    function closeModals() {
        rootEl.classList.remove('is-clipped');
        allModals.forEach(function (el) {
            el.classList.remove('is-active');
        });
    }

    // Functions

    function getAll(selector) {
        return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
    }
});

Answer 5

尝试此代码

$(document).ready(function() {
   $("#your_id_button").click(function() {

     $("#id_modal").addClass("is-active"); // modal is open

   });

   $("#your_id_button_close").click(function() {

     $("#id_modal").removeClass("is-active"); // modal is close

   });

});`

模态不显示bulma css

5 个答案: