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中，您必须在“外部资源”下的左侧菜单中输入外部“css”和“js”文件：

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

完成后，your code works。

jQuery移动插件弹出支持

2 个答案: