jQuery 移动插件弹出支持答案

【问题标题】：jQuery mobile plugin popup supportjQuery 移动插件弹出支持
【发布时间】：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

标签： javascript jquery jquery-ui jquery-mobile jquery-plugins

【解决方案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>

【讨论】：