jQuery Mobile"popup"div是不是隐藏了？
Mik*_*Sav 5 jquery jquery-mobile
我正在使用jQuery Mobile并希望使用该popup方法.以前一切都工作但是当我不得不重构我的代码时出现了问题,现在我花了这么长时间看这个我真的看不到"木头为树".因此,在我的应用程序中,我创建了一个测试页面,从中删除了所有的JS和CSS以及HTML,因此页面非常简洁.我甚至走得太远以至于我已经添加了JQuery示例并链接到他们的托管脚本,以防由于我的代码而发生冲突......但我的问题仍然存在......用于弹出窗口的DIV是'最初隐藏并点击按钮什么都没做......我真的对此做了很多努力,我确信我错过了一些非常简单明了的东西(也许我应该去喝咖啡15分钟). ..
这是代码
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<a href="#basic" data-rel="popup" data-role="button">Default popup</a>
<div id="basic" data-role="popup" class="ui-content">
<p>I am a default popup</p>
</div>
<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="popup">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="popup">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="popup">Slide down</a>
<div id="transitionExample" data-role="popup" data-transition="flip">
<p>This is some text for the transition example</p>
</div>
</body>
</html>
这是Firefox中的截图(在部署到测试设备时也是如此)
我做错了什么......我能感受到即将到来的情感时刻......
如果您想使用弹出对话框，您将需要链接到正确版本的 JQM，此外，我认为您不需要ui-content在 div 上放置一个类，来自文档
<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
如果您打算将其与对话框一起使用，那么您的标记会稍微偏离，您的链接/按钮应该位于它们自己的页面中，并且对话框应该位于它们自己的 div 中（即不嵌套在带有链接的页面中）。
这是固定的标记
<div data-role="page">
<a href="#basic" data-rel="dialog" data-role="button">Default popup</a>
<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="dialog">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="dialog">Pop</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="dialog">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="dialog">Slide down</a>
</div>
<div id="basic" data-role="dialog">
<div data-role="header"><h3></h3></div>
<div data-role="content" >
<p>I am a default popup</p>
</div>
</div>
<div id="transitionExample" data-role="dialog">
<div data-role="header"><h3></h3></div>
<div data-role="content">
<p>This is some text for the transition example</p>
</div>
</div>
| 归档时间： |
|
| 查看次数： |
5880 次 |
| 最近记录： |