如何使用jQuery Mobile在页面加载之前加载对话框或弹出窗口
[英]How to load Dialog or Popup before page load using jquery mobile
问题描述
Is there any method to call/show Dialog or popup before page load using jquery Mobile? 
在使用jquery Mobile加载页面之前，是否有任何方法可以调用/显示Dialog或弹出窗口？
I want to get some input before page load and according to that input next page will be loaded 我想在页面加载之前得到一些输入，根据输入，下一页将被加载
3 个解决方案
解决方案1
2 2013-05-08 12:55:26
To load a dialog or a popup before showing a page, you need to use seTimeout . 要在显示页面之前加载对话框或弹出窗口，需要使用seTimeout 。 if you call it without a delay, it will open and close at once. 如果您立即调用它，它将立即打开和关闭。
$(document).on('pagebeforeshow', '#pageID', function() {
setTimeout(function () {
$('#popupID').popup('open');
}, 100); // delay above zero
});
解决方案2
1 2013-05-08 20:52:16
There's a very simple solution to your question, only thing you need to do is make your first page to be a dialog. 您的问题有一个非常简单的解决方案，只需将首页设为对话框即可。
Working example: http://jsfiddle.net/Gajotres/dj3UP/1/ 工作示例： http : //jsfiddle.net/Gajotres/dj3UP/1/
As you can see it in my example this is a pure HTML solution. 正如您在我的示例中看到的那样，这是一个纯HTML解决方案。 First page data-role attribute was changed to dialog . 第一页数据角色属性已更改为dialog 。
HTML : HTML：
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="dialog" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<input type="text" value="" id="some-input"/>
<a data-role="button" id="some-button" href="#second">Next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
解决方案3
0 2013-05-08 12:49:12
Try Following: 尝试以下操作：
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: ""
});
Refere Link: 推荐链接：
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.