[英]If modal is active/shown add modal-open not on click
I know this question is asked a lot but all the answers I've found all have the same answer which is great for most but it isn't working with my code, 我知道这个问题被问了很多,但我发现的所有答案都有相同的答案,这对大多数人来说都是很好的,但它不适合我的代码,
This is the Javascript to open my modals 这是打开我的模态的Javascript
$(".button-b, .item, .item2, .button-a, .port_item").on("click", function() {
var modal = $(this).data("modal");
$(modal).show();
});
$(".modal").on("click", function(e) {
var className = e.target.className;
if(className === "modal" || className === "closex"){
$(this).closest(".modal").hide();
}
});
I could just add $("html","body").addClass("modal-open");
我可以添加$("html","body").addClass("modal-open");
to .button-a, .button-b").on("click", function() {
and $("html","body").removeClass("modal-open");
to $(".modal").on("click", function(e) {
but because I've linked .button-b. .button-a
any button that uses those styles also adds .modal-open
to the body which means when someone clicks a button that isn't opening a modal the screen freezes and you can't scroll, to .button-a, .button-b").on("click", function() {
和$("html","body").removeClass("modal-open");
to $(".modal").on("click", function(e) {
但因为我已经链接了.button-b. .button-a
任何使用这些样式的按钮也会增加.modal-open
到body,这意味着当有人点击没有打开模态的按钮屏幕冻结,你不能滚动,
I tried to come up with something to work around it: 我试图想出办法来解决它:
$(document).ready(function(){
var modal = $(this).data("modal");
if (modal = show) {
$("html","body").addClass("modal-open");
} else {
$("html","body").removeClass("modal-open")
}
});
But I have absolutely no clue what I'm doing in javascript so it doesn't work - what I want it do is when the modal is active/shown to add .modal-open
to the body, so that it's not adding .modal-open
when any buttons with .button-b, .button-a
stylings are clicked but only if the modal is shown, I'm guessing I need an event listener? 但我完全不知道我在javascript中做了什么,所以它不起作用 - 我想要它做的是当模态处于活动状态/显示添加.modal-open
到正文时,所以它不会添加.modal-open
当点击.button-b, .button-a
任何按钮时.button-b, .button-a
但仅当显示模态时,我猜我需要一个事件监听器? any help would be great. 任何帮助都会很棒。
Firstly, the following is incorrect... 首先,以下是不正确的......
$("html","body").addClass("modal-open");
The correct format is to list the selectors in the same string... 正确的格式是在同一个字符串中列出选择器...
$("html, body").addClass("modal-open");
If I understand your issue correctly, the problem is that you're doing a hide on $(modal)
independent of whether there is a result from $(this).data("modal")
... and therefore adding the addClass
within the same function results in no modal being shown, but the body being unusable. 如果我正确地理解你的问题,问题是你在$(modal)
上隐藏,而不管是否有来自$(this).data("modal")
...并因此在其中添加addClass
相同的功能导致没有显示模态,但身体无法使用。
So I believe this is more along the lines of what you want... 所以我相信这更符合你想要的......
$(".button-b, .item, .item2, .button-a, .port_item").on("click", function() {
var modal = $(this).data("modal");
if (modal) {
$(modal).show();
$("html, body").addClass("modal-open");
}
});
$(".modal").on("click", function(e) {
var className = e.target.className;
if(className === "modal" || className === "closex"){
$(this).closest(".modal").hide();
$("html, body").removeClass("modal-open");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.