jQuery 移动插件弹出支持
Posted
技术标签:
【中文标题】jQuery 移动插件弹出支持【英文标题】：jQuery mobile plugin popup support 【发布时间】：2016-06-09 17:13:02 【问题描述】：我想使用 http://demos.jquerymobile.com/1.4.5/popup/ 创建一个弹出窗口。
这里是 jquery 托管的 cdn 托管文件：https://jquerymobile.com/download/
据我所知https://jsfiddle.net/hbaecklund/1zoj1pms/2/为什么不起作用？
这是我尝试使用 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>');
【问题讨论】：
在使用 jQuery 函数之前，您必须先加载 jQuery.js。或者您可以使用 javascript 插入它们。 plnkr.co/edit/cRuBsJF6HLEMvtJfPqua?p=preview 【参考方案1】：在 JSFiddle 中，您必须在“外部资源”下的左侧菜单中输入外部“css”和“js”文件：
除此之外，JSFiddle 要求使用 https 而不是 http。
做完之后your code works。
【讨论】：
【参考方案2】： <!-- 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>
【讨论】：
以上是关于jQuery 移动插件弹出支持的主要内容，如果未能解决你的问题，请参考以下文章
移动端 jQuery日期插件---zepto.mdater (底部弹出层)
移动端 jQuery日期插件---zepto.mdater (底部弹出层)
（jquery 插件开发）怎样作出这样的效果，点击add弹出一个表（这是jqgrid的效果）
在移动设备上禁用 Bootstrap 日期选择器的键盘弹出窗口（Rails 4，Jquery）