模态不显示 bulma css
Modal not displaying with 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 classes 都已编写，您只需正确绑定事件即可。如果您访问模态文档页面 (https://bulma.io/documentation/components/modal/)，您会看到一个 No Javascript 警告，指出
Bulma does not include any JavaScript interaction. You will have to
implement the class toggle yourself.
只需定义 refs.modalEdicion.open 函数以根据文档添加 class is-active，并在关闭按钮上绑定事件以删除相同的 CSS class。如果您想通过单击叠加层关闭模态，您可能还希望将事件绑定到叠加层元素。
这是所需的实现。 https://codepen.io/anon/pen/KRaqxG
好的，首先，您需要发布 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>
想法是，根据 css 规则，模态的初始显示是 display: none 一旦您单击按钮， Javascript 方法将 运行 并更改这对 display:block
您可以更改此行为以做很多事情。您可以切换 class 您可以更改 transform: scale() 这是我个人的偏好。
这个例子是一个有效的例子。
在开始之前，打开模式的简单方法应该是这样的；
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);
现在，我们可以监听上面的事件了。
收听节目事件示例
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
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>
希望这个回答对布尔玛新手有所帮助
这周我 运行 遇到了这个问题，我发现了这个 link。它包含官方（根据它）Bulma Modal Doc 页面的 javascript 代码。我将它复制并减少了一两行，它适用于您的代码中的所有 bulma 模态。
请注意，这是非常开放的代码。 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
});
});`
我想在单击按钮但不起作用时显示模式。这里的代码：
<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 classes 都已编写，您只需正确绑定事件即可。如果您访问模态文档页面 (https://bulma.io/documentation/components/modal/)，您会看到一个 No Javascript 警告，指出
Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself.
只需定义 refs.modalEdicion.open 函数以根据文档添加 class is-active，并在关闭按钮上绑定事件以删除相同的 CSS class。如果您想通过单击叠加层关闭模态，您可能还希望将事件绑定到叠加层元素。
这是所需的实现。 https://codepen.io/anon/pen/KRaqxG
好的，首先，您需要发布 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>
想法是，根据 css 规则，模态的初始显示是 display: none 一旦您单击按钮， Javascript 方法将 运行 并更改这对 display:block
您可以更改此行为以做很多事情。您可以切换 class 您可以更改 transform: scale() 这是我个人的偏好。
这个例子是一个有效的例子。
在开始之前，打开模式的简单方法应该是这样的；
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);
现在，我们可以监听上面的事件了。
收听节目事件示例
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
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>
希望这个回答对布尔玛新手有所帮助
这周我 运行 遇到了这个问题，我发现了这个 link。它包含官方（根据它）Bulma Modal Doc 页面的 javascript 代码。我将它复制并减少了一两行，它适用于您的代码中的所有 bulma 模态。
请注意，这是非常开放的代码。 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
});
});`