Question

我想在jquery mobile中通过javascript打开一个对话框，我尝试了几种方法但都失败了，我不知道出了什么问题。任何人都可以帮我一个忙吗？

这是我的jsfiddle页面： http://jsfiddle.net/kK24p/15/

源代码也列出如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>lune mobile</title>
<link rel="shortcut icon" href="images/logo16.png" />
<link rel="stylesheet" media="screen" href="css/jquery.mobile-1.4.5.css">
<link rel="stylesheet" media="screen" href="css/jquery.mobile.theme-1.4.5.min.css">

<script type='text/javascript' src="js/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src="js/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript" language="javascript">
function deleteRem() {
	//$.mobile.changePage('#diaDelete', {transition: 'pop', role: 'dialog'});
	//$.mobile.changePage( "#diaDelete", { role: "dialog" } );
	//$.mobile.changePage('#diaDelete', 'pop', false, true);
	//$("#diaDelete").popup();
	//$("#diaDelete").popup('open');
	$.mobile.pageContainer.pagecontainer("change", "#diaDelete", { transition: 'pop', role: "dialog" });
}

</script>
</head>
<body>

<div data-role="page">


<ul id="lstRem" data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="true">
	<li id="">
		<a href="javascript:void(0);" onclick="javascript:deleteRem();">
			<h2>delete</h2>
		</a>
	</li>
</ul>

<div id="diaDelete" data-role="dialog" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
	<h3>Alert</h3>
	<p>Are you sure to delete</p>
	<a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-icon-forbidden ui-btn-icon-left ui-btn-inline ui-mini">Cancel</a>
	<a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Confirm</a>
</div>

</div><!-- /page -->

</body>
</html>

Answer 1

请检查以下代码。我做了一些改动，没有涉及脚本。有关更多信息，请转至http://demos.jquerymobile.com/1.4.2/popup/#&ui-state=dialog

<div data-role="page">

<ul id="lstRem" data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="true">
    <li id="">
        <a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>
    </li>
</ul>

<div id="popupDialog" data-role="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" class="ui-content" style="max-width:340px; padding-bottom:2em;">
    <h3>Alert</h3>
    <p>Are you sure to delete</p>
    <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-icon-forbidden ui-btn-icon-left ui-btn-inline ui-mini">Cancel</a>
    <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Confirm</a>
</div>

</div><!-- /page -->

jquery mobile：如何通过javascript打开对话框div

1 个答案: