- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在我的网站上实现 jquery-bubble-popup 但我完全陷入困境。我正在尝试执行以下操作。
设置非常简单,但我却抓狂了。无法让弹出窗口在不失控的情况下关闭。
fiddle :http://jsfiddle.net/rECnm/1/
jQueryBubblePopup:http://www.maxvergelli.com/jquery-bubble-popup
代码:
$(document).ready(function () {
$('div.emailReportIcon').CreateBubblePopup({
manageMouseEvents: false
});
$('div.emailReportIcon').click(function (event) {
var button = $(this);
var email = button.attr("data-email");
var message = '<div style="padding:10px;width: 250px;"><p><input type="checkbox"> Email me when new reports are ready.</p>' + '<p>Email Address<br /><input type="text" value="' + email + '"></p>' + '<div >' + '<input type="image" name="submit" value="submit" class="submitButton">' + '</div></div>';
button.ShowBubblePopup({
manageMouseEvents: false,
position: 'bottom',
align: 'left',
tail: {
align: 'left'
},
innerHtml: message,
innerHtmlStyle: {
color: '#000',
'text-align': 'left'
},
themePath: 'http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/images/jquerybubblepopup-themes',
alwaysVisible: false,
closingDelay: 200,
selectable: true
});
});
});
最佳答案
var button = false;
var active = true;
$(document).ready(function () {
$('div.emailReportIcon').CreateBubblePopup({
manageMouseEvents: false
});
$('div.emailReportIcon').click(function (event) {
resetActiveBubble();
button = $(this);
active = true;
var email = button.attr("data-email");
var message = '<div style="padding:10px;width: 250px;"><p><input type="checkbox"> Email me when new reports are ready.</p>' + '<p>Email Address<br /><input type="text" value="' + email + '"></p>' + '<div >' + '<input type="image" name="submit" value="submit" class="submitButton">' + '</div></div>';
button.ShowBubblePopup({
manageMouseEvents: false,
position: 'bottom',
align: 'left',
tail: {
align: 'left'
},
innerHtml: message,
innerHtmlStyle: {
color: '#000',
'text-align': 'left'
},
themePath: 'http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/images/jquerybubblepopup-themes',
alwaysVisible: false,
closingDelay: 200,
selectable: true,
afterShown: function() {
active = false;
$(".jquerybubblepopup").bind("mouseenter",function() {
active = true;
}).bind("mouseleave", function() {
active = false;
});
}
});
});
$(window).bind('click',function() {
resetActiveBubble();
});
});
function resetActiveBubble() {
if ( button && active == false ) {
button.RemoveBubblePopup();
button.CreateBubblePopup({
manageMouseEvents: false
});
}
}
上面的代码有一个窗口单击监听器和一个 bool 变量,用于确定气泡是否“事件”(例如,鼠标位于气泡上方)。
此解决方案不适用于 ipad 等(您需要触摸监听器),并且在使用 jsfiddle 时,您仍然可以通过在加载过程中单击它来关闭气泡;在 afterShown 被触发之前,事件状态不会被附加。
我确信它可以被优化(另请注意 jsfiddle 中的 console.logs)。我希望这会有所帮助。
关于javascript - 实现 jquery bubble-popup 的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16245764/
我正在使用带有气泡的 D3 和 DataMaps。我想在有人点击气泡时添加自定义操作。这些操作需要传递气泡的属性,例如气泡的名称。 如何将气泡的名称传递到该气泡的点击事件中? map.svg.sele
我有一个 d3 脚本,其中包含以下格式的数据: var data = [{name: "A", rank: 0, student_percentile: 100.0, adm
冒泡排序基本介绍 冒泡排序(Bubble Sorting)的基本思想是通过对待排序序列从前向后(从下表较小的元素开始),以此比较相邻元素的值,若发现逆序则交换,使值较大的元素逐渐从前向后部,就像水底下
冒泡排序基本介绍 冒泡排序(Bubble Sorting)的基本思想是通过对待排序序列从前向后(从下表较小的元素开始),以此比较相邻元素的值,若发现逆序则交换,使值较大的元素逐渐从前向后部,就像水底下
我没有阅读太多关于它的内容,但是下面链接中的作者建议我不要使用“冒泡”来集中 VBA 中的错误处理。 Excel Programming Weekend Crash Course via Google
这是我的冒泡排序代码,但我很困惑为什么输出仅显示 125。 int secondArray[] = {0, 1, 5, 2}; int num; for (int i = 1; i secondAr
我不确定这是一个传播问题还是一个设计缺陷,我读到过传播问题都是泡沫,但它就在这里。我有一个表格编辑网格。 每个单元格包含两个主要 block :编辑 div(包含用于编辑显示值的表单)和查看 div(
这个问题在这里已经有了答案: jquery stop child triggering parent event (7 个答案) 关闭 8 年前。 我不确定这是否真的冒泡,我会解释。 我有这个:
我想知道是否可以在 Swing 中制作类似于 StackOverflow 上的标签输入系统的东西(可能使用 JTextField)。 最佳答案 您可以重新定义自己的类来扩展 JTextField 类并
public static void sortByNumber(Course[] list) { Course temp = new Course(); boolean fixed =
在我的事件处理函数中,我需要检查某些字段是否是唯一的。为了实现这一点,我在后端使用 ajax 调用函数。 使用回调从该函数发回数据。此时我有事件处理程序: self.searchKeyboardCmd
我想设置 OKFN 制作的泡泡树。 https://github.com/okfn/bubbletree/wiki/Bubble-Tree-Documentation 现在我想在这里输入一些数据。我想
我想创建气泡,就像 iPhone 上的邮件应用程序一样。但是大量气泡(> 10)会大大减慢 View 的滚动速度。 关于我的实现的几句话:我创建自定义 View 并在其上添加“气泡”。以下是我创建每个
我目前正在开发一个 Web 应用程序,并尝试使用 QuillJS 作为所见即所得编辑器。我正在尝试使用“Bubble”主题,因为它与我的网络应用程序的其余部分非常适合,但是当工具提示应该出现时,它并没
main方法创建一个随机整数数组,然后调用升序和降序方法对数组进行排序。似乎当我调用升序和降序方法时,它会改变原始数组的值。打印时收到的输出是三个数组,全部按降序排序。 public static v
对于下面的 facebook 点赞按钮,按钮右侧有一个# of likes 气泡(?)(见下文 - 气泡上带有“3.5k”的文本) 问题是——它是用 css 绘制的吗?如何创建? 最佳答案 fiddl
如果字符串很长,则必须转到下一行。我该怎么做? Demo HTML Body 01-10 03:29:
给定冒泡排序算法: Algorithm BubbleSort(A[0...n]): for i <- 0 to n-2 do for j <- 0 to n-2-i do if
这个问题在这里已经有了答案: Is it possible for the child of a div set to pointer-events: none to have pointer ev
我正在尝试获取通知以在 MFC 应用程序中弹出类似这些气泡的内容: (来源:humanized.com) 我目前正在用 C# 制作一个界面模型,以向一些利益相关者展示,所以最好也有它。 它不一定非得是
我是一名优秀的程序员,十分优秀!