个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个 Web 应用程序，我在其中多次使用 Bootstrap-popovers。这些弹出窗口包含 HTML，用于显示小表单等。这个想法是在显示弹出窗口时用黑色透明覆盖层“调暗”背景，以尽量减少对用户的干扰。我已经很容易地掌握了基础知识，但我真的无法按照自己的意愿使用它。
所需的功能是:每当按钮触发弹出窗口时，叠加层应显示在背景中，覆盖页面的其余部分。当弹出窗口被关闭时，无论是通过它的保存按钮，通过它的取消按钮或通过第二次点击原始触发按钮，叠加层将再次隐藏。
这是我的代码:
HTML
<html>
<head>
// loading bootstrap.css
// loading main.css
// loading jquery.min.js
// loading bootstrap.min.js
// loading main.js
</head>
<body>
<div class="fadeMe" style="display:none"></div>
// ...lots of content
<div id="newReward" class="reward-markup edit-area">
<a href="#!" id="addRewardBtn" class="btn btn-primary trigger">
ADD REWARD
</a>
<div class="head hide">
<h4>NEW REWARD</h4>
</div>
<div class="content hide">
// ...small HTML-Form which works fine
<button class="btn btn-warning pull-left" onclick="$('.popover').popover('hide');">CANCEL</button>
<button class="btn btn-warning pull-right" onclick="addReward()">SAVE</button>
</div>
</div>
</body>
</html>
主要 CSS
.fadeMe
{
opacity:0.7;
filter: alpha(opacity=20);
background-color:#000;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
position:fixed;
}
主要 JS
$(function(){
$(".trigger").on('show.bs.popover', function(){
$("div.fadeMe").show();
});
$(".trigger").on('hidden.bs.popover', function(){
$("div.fadeMe").hide();
});
});
$('.reward-markup > .trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
},
container: 'body',
placement: 'bottom'
});
虽然这不起作用。触发弹出窗口会按原样显示叠加层，但使用原始触发按钮关闭弹出层会留下叠加层而不隐藏它，此后会完全破坏弹出层功能(取消按钮功能应有)。奇怪的是，如果你用简单的警报来补充 jquery 显示/隐藏调用，那么整个事情都可以正常工作，触发按钮相应地显示警报:
$(".trigger").on('show.bs.popover', function(){
alert('The popover is about to show.');
});
$(".trigger").on('hide.bs.popover', function(){
alert('The popover is now hidden.');
});
更奇怪的是:如果你添加 both 警报和 jquery-calls 触发按钮将显示第一个警报，然后显示叠加层，但第二次点击触发按钮将不会显示第二个警报和叠加层不会隐藏:
$(".trigger").on('show.bs.popover', function(){
alert('The popover is about to show.');
$("div.fadeMe").show();
});
$(".trigger").on('hide.bs.popover', function(){
alert('The popover is now hidden.');
$("div.fadeMe").hide();
});
有人可以帮我理解这里发生了什么吗？这让我抓狂!
最佳答案
我以前遇到过这种情况......如果它对你有用，只是寻求帮助
在取消按钮中而不是 .('hide'); 弹出框 ...只需尝试再次单击原始按钮，如下所示......
<button class="btn btn-warning pull-left" onclick="$('.reward-markup > .trigger').click()">CANCEL</button>
希望对你有帮助
同时检查这个fiddle ....如果有帮助
关于javascript - Bootstrap 弹出窗口 : Use of callbacks in order to show/hide overlay -doesn't work，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33200581/
24
4
0
我正在寻找通过 sql 查询对我的 sql 结果进行排序，大概在 order by 子句中使用某种嵌套的 order by/order by 我有以下数据: TERM USER I
我有一个表格，其中包含如下所示的部分数据。我已经在 edition_id 上完成了订购。现在还需要订购 laungauge_id，这取决于 edition_id 的值。 Edition_id 是指报纸
所以我有两个表，Questions 和 Answers，由多对多关系表 QuestionsAnswers 连接。 Questions 有一个排序列，允许我控制它们如何显示给用户，而 Questions
当我们说“高阶”函数时，我怀疑“阶”的真正含义是什么？例如，我有一个嵌入式函数调用: f.g.h 那么它叫“三阶”函数吗？ “高阶”函数是静态函数累加的概念吗？然后当我有一个递归函数 f 时，在运行时
在具有多个 order by 子句的 SQL 查询中，它们是否真的在执行期间全部运行？ 例子: select * from my_table order by field5, field3, fiel
我跟进 query其中 schema.org 数据库用于查找类的子级数量 - 作为比我的应用程序更简单的数据库。我想按字母顺序连接 child 的名字。查询: prefix schema: pre
正如 nazdrovje 所指出的(参见 here ) Ordering@Ordering 可用于获取列表中每个元素的排名。即使列表包含重复元素，结果也是 n 排列(作为整数 1 到 n 的有序列表，
我有两张 table 。 它们都有日期和 item_id 列。 我正在通过 item_id 加入他们。 结果应按两个日期列一起排序 下面的代码有效，生成正确的结果集... 但是它们仅按第一个表的日期排
尝试掌握 SQL 我想按日期订购，然后在其中按标题订购。 示例: SELECT * FROM tblboek ORDER BY jr_van_uitgave DESC 如何在按年龄的订单中按头衔排序？
我想使用 FIELD 参数对我的 SQL 输出进行排序，但是当我这样做时，它首先吐出我不想要的结果，然后它首先吐出我想要的结果。在结果之上，它首先吐出。如果这有意义的话 ;) 如何先吐出已定义的值，然
我有一个无法破解的排序问题。我这样从我的表中选择: SELECT * FROM 'sidemodules' WHERE name = 'module1' OR name = 'module2' OR
我对 Django oscar 的覆盖模型有疑问。我想为模型添加一个新字段，但是当我这样做时，我遇到了 RuntimeError: Conflicting 'order' models in appl
我有两个表，电影和类别，我想先按CategoryID获得一个排序列表，然后按名称排序。。电影表格有三个列ID、NAME和CategoryID。CATEGORY表有两列ID和NAME。。我尝试了下面这样
In a MySQL query, when using the DISTINCT option, does ORDER BY apply after the duplicates are re
我想创建一个 sql 查询，为 2 个不同的查询一起返回结果。例如，我想要以下形式的结果:产品名称, avg(price), min(price), max(price), avg(order), m
我正在使用行号从存储过程中获取分页结果。 我发现使用动态 case 语句列名称进行排序会减慢速度 - 但如果我对所有内容进行硬编码就可以了。 有没有办法通过不使整个 sql 查询一个字符串并使用 SP
如何在范围搜索中使用Morton Order？ 在wiki中，在“使用一维数据结构进行范围搜索”段落中， 它说 "the range being queried (x = 2, ..., 3, y =
我正在使用 sequelize.js，我在使用 order 语句时遇到问题，我想先通过 if id 排序(如果我的 id 在该别名表中)，然后再排序.... order = [['alias', 'i
我有一个 php 脚本，它从数据库中提取内容并以某种方式打印它们。数据库有一个名为“order”的列标题，它的 INT 大小为 11。当我从数据库中获取数据时，我试图按数据库中的值“order”对内容
我有一个带有 ORDER BY 子句的 UPDATE 查询。我已将相同的查询复制到具有相同 ORDER BY 子句的 SELECT 中，但得到了不同的结果。 更新查询: UPDATE t_locks
我是一名优秀的程序员,十分优秀！