jQuery mobile plugin popup support
Question
I'd like to use http://demos.jquerymobile.com/1.4.5/popup/ to create a popup.
Here's jquery hosted cdn hosted files: https://jquerymobile.com/download/
This as far as I've come https://jsfiddle.net/hbaecklund/1zoj1pms/2/ Why doesn't it work?
Here's what I tried to create using 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 answers
solution1
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>
solution2
1 ACCPTED 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":
Besides that, JSFiddle asks for https instead of http.
After doing it, your code works .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.