- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如果您单击
任一图像,每个图像都会出现一个独特的模态
。
我使用了一个功能,可以在您点击离开时隐藏苹果模式。
如果我单击任何 .alt-btn
,如何保持苹果模式显示?
$(document).on("click", function(e) {
if (
$(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
e.stopImmediatePropagation();
}
});
$(".button").on("click", function() {
const id = $(this).prop("id");
$(".modal").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
$(document).on("click", function(e) {
if (
$(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.button {
height: 30px;
cursor: pointer
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" data-close="apple" />
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<button class="alt-btn">Keep Open</button>
<button class="alt-btn">Keep Open</button>
最佳答案
您只需在此处添加“.alt-btn”:
if ($(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button, .alt-btn").is(e.target))
{
if(!$(".apple-modal").hasClass("keep-active"))
$(".modal").removeClass("active");
}
这是工作示例:
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
e.stopImmediatePropagation();
}
});
$(".button").on("click", function() {
const id = $(this).prop("id");
$(".modal").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
$(document).on("click", function(e) {
if (
$(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button, .alt-btn").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.button {
height: 30px;
cursor: pointer
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" data-close="apple" />
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<button class="alt-btn">Keep Open</button>
<button class="alt-btn">Keep Open</button>
编辑:==>
这不是问题。我认为你需要在第二次按下开启按钮时关闭它。如果您不需要关闭,则必须删除。
data-close="apple"
来自
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" data-close="apple" />
请看下面的代码示例:
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
e.stopImmediatePropagation();
}
});
$(".button").on("click", function() {
const id = $(this).prop("id");
$(".modal").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
$(document).on("click", function(e) {
if (
$(".apple-modal").hasClass("active") &&
!$(".modal, .modal *, .button, .alt-btn").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.button {
height: 30px;
cursor: pointer
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" />
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<button class="alt-btn">Keep Open</button>
<button class="alt-btn">Keep Open</button>
关于javascript - 有条件的 removeClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52922113/
如何在 2014-10-04 - 2014-10-30 仅工作日和 08.00 - 20.00 之间随机更新日期列? 2014-10-04 - 2014-10-30 random working-da
我有一个二维 (3x7) 数组,我想转换为一维数组,以便我提供的行位于中心。行值可能沿途变化,但必须位于中心。 #define numRows 3 #define numCols 7 #define
我有2张 table : 第一个是“人”: person_id, 人名 第二个是“PersonsGraphs”: person_id1, person_id2, 关系类型 我正在寻找一种建立“家谱”的
是否可以在序列化 JSON 响应的同时根据 If 条件排除某些元素? if(a == 1) { //show element } else { //don't show element }
是否可以在序列化 JSON 响应的同时根据 If 条件排除某些元素? if(a == 1) { //show element } else { //don't show element }
尝试使用 jQuery 编写一个条件,该条件基本上说明,如果 div.gathering 不包含 a.cat-link,则执行以下操作。我已经尝试过以下方法,但似乎不起作用。有人能解释一下吗? if(
该练习要求插入值 x 的副本(这也是要在列表中搜索的值),但前提是该位置是另一个值 n 的倍数。未指定副本应插入到 x 值之前还是之后。 我的问题是并非在所有情况下都插入副本。我认为问题在于,当我插入
我遇到了这个[问题]:How can I store values into a multi-parameter struct and pass typedef struct to a functio
出于某种原因,当我编写 getWinner() 时,它仅适用于 2 种情况(最后一行)。就对角线和列而言,我拥有其他一切,但第 2 行(嗯,三,但数组,所以 2)基本上只适用于 o。只有当 o 位于
我有一个问题。 我想将“guid”列中的值复制到“帖子内容” 所有行都在一个表“wp-posts”中 “postparent”列中的一行有一个值,而“ID”列中的另一项也有相同的值 我必须做的事情是
我想将两个像这样的表合并到一个表中,并为重复的键行添加合并表中最旧的 DateAdded 值。 (Key1,Key2) 是主键。 +-----------+-----------+------+---
通过下面的表格和数据,我试图获得最高的 effective_from每个唯一 brand 小于当前时间戳的值/model组合 - 实际上是每件商品的当前价格。 CREATE TABLE things
您能告诉我如何删除未知号码的最后一条记录(有条件)吗? 例如,在这种情况下我想删除id为6到10的记录。 注意:该表和记录不是恒定的。 +----+-----+---------+ | id | ur
这个问题不太可能对任何 future 的访客有帮助;它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关,通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用,visit the
我有两个表, 标签 -> id,name,description,user,status 标签_连接。 -> id, Label_id, 类别 所以有多个类别,假设 1 => 新的,2 => 旧的。
好的,我会长话短说。 这是我的代码 String s = edittextkata.getText().toString(); String[] vowels = {"a","
我有一个非常具体的要求,我发现很难做到,我需要查找并替换文件中的某些行,但问题是文本不同,唯一的好处是它们都有一个 .[扩展名] 例如: 30/07/2012 14:46 17
我有一个大型数据库,其中存在各种不一致之处。我想澄清的项目之一是根据人口更改国家/地区状态。 数据样本是: { "_id" : "D", "name" : "Deutschland", "pop" :
我需要将范围(有条件)中的唯一值组合到同一行的另一个范围中。 其实我前两天发过类似的问题Link所提供的答案在我提出上述问题时有效。 但后来,我遇到了一个新问题,我宁愿问一个新的问题,让它更清楚: (
我刚开始使用 VBA,并且正在努力处理需要清理的工作表。 我有一列包含混合邮政编码和城市名称的字符串。我想从 A 列中提取邮政编码并放在 B 列中,并在 C 列中提取带有下划线的城市名称。 我的(示例
我是一名优秀的程序员,十分优秀!