jQuery移动插件弹出窗口支持
[英]jQuery mobile plugin popup support
问题描述
I'd like to use http://demos.jquerymobile.com/1.4.5/popup/ to create a popup. 
我想使用http://demos.jquerymobile.com/1.4.5/popup/创建一个弹出窗口。
Here's jquery hosted cdn hosted files: https://jquerymobile.com/download/ 这是jQuery托管的CDN托管文件： https ://jquerymobile.com/download/
This as far as I've come https://jsfiddle.net/hbaecklund/1zoj1pms/2/ Why doesn't it work? 据我所知，这是https://jsfiddle.net/hbaecklund/1zoj1pms/2/为什么不起作用？
Here's what I tried to create using jquery. 这是我尝试使用jquery创建的内容。
$( "head" ).append ('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>');
$( ".target" ).append('<a href="#popupCloseRight" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Right close button</a><div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><p>I have a close button at the top right corner with simple HTML markup.</p></div>');
2 个解决方案
解决方案1
1 2016-02-26 13:42:00
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" id="pop" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
<p>pop!!</p>
</div>
解决方案2
1 已采纳 2016-02-26 19:50:24
In JSFiddle you have to input your external "css" and "js" files in the left side menu under "External Resources": 在JSFiddle中，您必须在“外部资源”下的左侧菜单中输入外部“ css”和“ js”文件：
Besides that, JSFiddle asks for https instead of http. 除此之外，JSFiddle要求使用https而不是http。
After doing it, your code works . 完成之后， 您的代码即可正常工作 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.