使用数据弹出属性显示 UI 对话框
Show UI dialogs using data-popup attributes
我正在使用jquery u界面在一个页面上显示多个弹出窗口,每个弹出窗口都有自己的ID,并且将由具有data-popup=""
属性的锚点触发。
例如
<a class="popup-button" data-popup="#popup-a">POPUP A</a>
将触发具有 ID #popup-a
的弹出窗口
下面是我试图实现这一目标而整理的 JS 片段,但是,由于某种原因,它会午餐页面中的所有弹出窗口而不是请求的弹出窗口。
//Popups
$('.popup-button').each(function() {
var popupId = $(this).attr("data-popup");
$.data(this, 'dialog', $(popupId).dialog({
modal: false,
open: function(){
$(".dialog").addClass("dialog-opened");
$('.popup-close').fadeIn();
$('#falseModal').fadeIn();
jQuery('#falseModal').bind('click',function(){
jQuery('.popup').dialog('close');
});
},
close: function(){
$(".dialog").removeClass("dialog-opened");
$('#falseModal').fadeOut();
}
}));
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
$('.popup-close').each(function() {
$(this).on("click",function(){$(this).parents('.popup').dialog("close");});
});
$(window).resize(function() {
$(".popup").dialog("option", "position", {my: "center", at: "center", of: window});
$('.widget-overlay').show().fadeOut(800);
});
$("body").append('<div id="falseModal" style="display:none;"></div>');
我在这里整理了一个JS小提琴:http://jsfiddle.net/znq4jwdu/1/
它会启动所有对话框,因为您调用
$('.dialog').addClass("dialog-opened");
这意味着您将打开所有具有对话框类的元素。
您可以通过执行以下操作来解决此问题:
$(popupId).parent().addClass("dialog-opened");
和相同的删除对话框
$(popupId).parent().removeClass("dialog-opened");
看看这个 JSFiddle
请注意,我不知道这是否是正确的行为,但是当您单击"弹出窗口A"时,它会触发内容为"BBB....."的弹出窗口
。希望对你有帮助
相关文章:
- ui网格将单元格显示为选择标记
- 是否有任何JavaScript UI组件可以显示字符串之间的差异
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 如何在页面重新加载时显示jquery ui对话框
- Angular UI-GRID未在页面上显示网格
- 如何仅在ui-grid.js中显示特定列
- Ui路由器未显示嵌套的子内容
- 为什么我的视图没有显示在角度ui视图中
- angular ui boostrap日期选择器显示年份第一
- Jquery UI日期选择器没有'单击链接时不会再次显示
- 如何在状态输入ui路由器时立即显示模板,然后当承诺被解决时显示数据
- Onsen UI在点击时显示一个日期选择器
- 使用 jQuery UI 折叠面板显示 couchDB 数据库搜索结果时出现问题
- 为什么引导 UI 在加载时不显示正确的日期格式
- 显示 ui 路由器模式而不刷新父状态
- 带有 d3 的嵌入式 Google 地图.js叠加层显示 UI 选项和叠加元素,但不是地图本身
- 如何显示uI-select(angularjs)时,单击html元素
- 为什么这个侧边栏数据没有进入ajax,为什么没有定义显示ui的滑块值
- 如何显示ui.组合弹出手动
- 使用数据弹出属性显示 UI 对话框