Html 不使用bulma css显示模式

我想在按钮被单击但不工作时显示模式。代码如下：

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

编辑

Bulma CSS是一个只支持CSS的框架，所有javascript行为都必须手动编写。这意味着对于一个模式，所有用于隐藏和显示该模式的CSS类都已经编写，您只需正确绑定事件。如果您访问Modal doc页面（），您会看到一条

无Javascript

警告，指出

Bulma不包括任何JavaScript交互。你必须 自己实现类切换

只需定义

refs.modalEdicion.open

函数，即可根据doc和bind events on close按钮添加类

处于活动状态

，以删除相同的CSS类。如果要通过单击覆盖来取消模式，您还可以选择将事件绑定到覆盖元素

---

下面是所需的实现

好的，首先，你需要发布你的javascript和css以获得相关的答案，但我将概述我的做法

您可以实现如下所示：

//一种模式
函数OpenModal（）{
//获取Id为“modal”的元素
var modal=document.getElementById（“modal”）；
//将样式更改为display=“block”
modal.style.display=“块”；
}
//多模态
函数OpenMore（n）{
//将class=“modal”为的元素放入数组中
var modal=document.getElementsByClassName（“modal”）；
//将模式编号[n]的样式更改为display=“block”
模态[n]。style.display=“块”；
}
//这将在单击模式后关闭它
window.onclick=函数（事件）{
//对于单模态
var modal=document.getElementById（“modal”）；
//如果单击的是模态，则模态样式显示=“无”
如果（event.target==模态）{
modal.style.display=“无”；
}
//对于多模态
var more=document.getElementsByClassName（“模态”）；
//我代表哪个模态。它将通过所有模态
对于（变量i=0；i

.modal{
显示：无；
背景颜色：黄色；
高度：100vh；
宽度：100vw；
位置：固定；
排名：0；
左：0；
}
#模态{
显示：无；
背景颜色：黄色；
高度：100vh；
宽度：100vw；
位置：固定；
排名：0；
左：0；
}
.按钮{
保证金：50px自动；
}

单模态
哈迪达尔
多图1
第一模态
多模数2
第二模态

启动前，打开模态的简单方法应该是这样的

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

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

在这种情况下，您可以打开和关闭您的情态动词，即使您可以收听节目并关闭事件

我使用Mozilla资源创建自定义事件。例如，您希望创建两个名为模态：显示和模态：关闭的事件。为此，您应该编写如下代码：

现场活动 关上事件 现在，我们可以听一下上述事件

收听Show事件的示例 侦听关闭事件的示例 我们知道如何从简易方式部分打开和关闭模式。但有时用户可以单击模式背景或“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 modal。甚至我们也能听到他们的表演和闭幕式。让我们简单一点

创建BulmaModal类 用法 让我们看看这个简单的片段

BulmaModal类{
构造函数（选择器）{
this.elem=document.querySelector（选择器）
这个。关闭_数据（）
}
show（）{
this.elem.classList.toggle（'is-active'）
这个节目
}
关闭（）{
this.elem.classList.toggle（'is-active'）
这个。on_close（）
}
关闭_数据（）{
var modalClose=this.elem.queryselectoral（“[data-bulma-model='close']，.model-background”）
var=this
modalClose.forEach（函数（e）{
e、 addEventListener（“单击”，函数（）{
that.elem.classList.toggle（'is-active'）
var事件=新事件（'模式：关闭'）
要素分派事件（事件）；
})
})
}
(){
var事件=新事件（'模式：显示'）
本要素分派事件（事件）；
}
on_close（）{
var事件=新事件（'模式：关闭'）
本要素分派事件（事件）；
}
addEventListener（事件、回调）{
this.elem.addEventListener（事件，回调）
}
}
var btn=document.querySelector（“#btn”）
var mdl=新的BulmaModal（“myModal”）
btn.addEventListener（“单击”，函数（）{
mdl.show（）
})
mdl.addEventListener（'modal:show'，function（）{
控制台日志（“打开”）
})
mdl.addEventListener（“模式：关闭”，函数（）{
控制台日志（“关闭”）
})

模态标题
这里有些东西

保存更改
取消
单击活动模式

我本周遇到了这个问题，我发现了这个问题。它包含官方（据It称）Bulma Modal Doc页面的javascript代码。我复制并减少了一两行代码，它适用于代码中的所有bulma模态

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

注意，这是非常开放的代码。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);
    }
});

试试这个代码

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

   });

});`

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

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

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

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

   });

});`