在条件语句中调用模态窗口
Calling a modal windows in a conditional statement
我有这个脚本的工作原理上的按钮点击,它弹出一个模态窗口与褪色的背景。这次我想要实现的是将其包含在条件语句中,脚本的后一部分如下
if (result != $version) { alert ('Your version is out of date') } } })
alert ('You are welcome back')
但是我想将警报更改为模态窗口,但无法通过
找到我的方式// JavaScript Document
$(document).on("pagecreate", function () {
$(".about").on("click", function () {
// close button
var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');
// text you get from Ajax
var content = "<p> hello folks, good evening</p>";
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 0 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
});
});
最简单的方法就是在条件语句中触发点击:
if (result != $version) {
$(".about").trigger("click");
}
然而,我将把点击回调重构为一个命名函数,并能够在条件和按钮的两个实例上调用它:
var openModal = function () {
// close button
var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');
// text you get from Ajax
var content = "<p> hello folks, good evening</p>";
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 0 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
};
$(document).on("pagecreate", function () {
$(".about").on("click", openModal);
});
条件句:
if (result != $version) {
openModal();
}
相关文章:
- 点击AngularJS模态窗口捕捉背景事件
- 在angularJS中使用模态窗口时,在控制器之间共享对象数组
- 如何使用jquery关闭模态窗口,通过模拟模态's关闭按钮
- Angularjs - 观察模态窗口从另一个控制器关闭
- 模态窗口yii2中的Ajax验证数据
- Ajax 模态窗口可以访问父窗口 PHP 数据吗?
- 在选择(rails_admin)时更改时在模态窗口中添加新字段
- 在模态窗口上创建 cookie
- 如何在用户离开网页时显示模态窗口
- Magento时事通讯弹出窗口(模态窗口)在每个页面上触发.它应该只在主页上弹出
- 如何在 jquery 中浮动模态窗口
- 创建一个模态窗口以使用 AngularJS 加载数据
- Angular JS将msg广播到多个视图,包括模态窗口
- 模态窗口在电子上消失
- 如何使用 javascript 在模态窗口内重定向
- ExtJS 4.2.1 用于加载指示和模态窗口的不同 CSS 掩码
- 机器人可以单击在 javascript 中制作模态窗口的链接吗?
- 如何在 angularjs 模态窗口中运行 jquery
- Javascript 模态窗口例程每次单击都会执行更多时间
- 模态窗口(弹出窗口)警报在使用 angularJs 的错误字段上显示