jQuery 移动插件弹出支持

Question

我想使用 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>');

Answer 1

  <!-- 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>

Answer 2

在 JSFiddle 中，您必须在 "External Resources" 下的左侧菜单中输入外部 "css" 和 "js" 文件：

除此之外，JSFiddle 要求使用 https 而不是 http。

完成后，your code works.

jQuery 移动插件弹出支持

jQuery mobile plugin popup support

javascript

jquery

jquery-ui

jquery-plugins

jquery-mobile