我有一个简单的页面,我在这个popup widget链接中应用Popup小部件。我正在使用 jquery 1.10.2 这是我的index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>popup demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/git/jquery.mobile-git.min.css">
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//code.jquery.com/mobile/git/jquery.mobile-git.min.js"></script>
</head>
<script type="text/javascript">
function closeDiv()
{
console.log("fine");
$('#popupLogin').popup( "close" );
}
</script>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content" id="ui-content">
<a href="#popupLogin" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupLogin" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<iframe src="../login.php" width="497" height="298" seamless></iframe>
</div>
</div>
<div>
<a href="../back.php" > click me1</a><br>
<a href="../back.php" > click me2</a>
</div>
</div>
</body>
</html>
这是我在iframe src中使用的login.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>
</head>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/db.js"></script>
<body>
<form name="loginForm" id="loginForm" >
<P><span class="title">Email Id</span> <input name="emailId" id="emailId" type="text" /></P>
<P><span class="title">Password</span> <input name="password" id="password" type="password" /></P>
<P><input name="login" id="login" type="button" value="Login" /></P>
<P><span class="title" id="error"></span></P>
</form>
</body>
</html>
我得到的问题是,我发送一个ajax post请求来验证用户的登录并在用户的验证结果成功后关闭popupLogin div:这是我的javascript代码:
function testLogin( eid, pwd )
{
atkn = getAuth(eid, pwd);
$.post(urls.auth, {authorize: atkn}, function(result){
if( result == LOGIN_SUCCESS )
{
window.parent.authResult = true;
window.parent.closeDiv();
}
else
{
$("#error").html(result);
}
});
}
一切正常,但当div关闭时,超链接点击me1 ,点击me2 根本不起作用。
我搜索过很多但无法找到解决此问题的方法。 请帮助或任何可以帮助我的链接。
我也尝试过以下@Omar说:
<div data-role="page" id="page1">
<div data-role="popup" id="popupLogin" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
<iframe src="../login.php" width="497" height="298" seamless></iframe>
</div>
<div role="main" class="ui-content" id="ui-content">
<a href="#popupLogin" data-rel="popup">Open Popup</a>
</div>
<a href="javascript(0)" onclick="window.open('../top_deals.php')"> click me1</a><br>
<a href="../top_deals.php" > click me2</a>
</div>