同一个界面中弹出登录框

时间：2023-01-12 10:22:22

本文出自: http://blog.sina.com.cn/s/blog_a5e9683701017d6e.html

<!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><title>弹出登录框实验</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<div>
<center>
  <H1>来试一下效果吧</H1>
  <td align="center">
   <input type="button" value="试一下" onclick="openFrame()">
  </td>
  <p>
   当你点击"试一下"按钮时，会弹出登录框，并且该登录框不是另一个html文件。
  </>
</center>
</div>
<div id="ControlLoginPanel" style="display:none;">
      <table style="margin-left:20px;font-size:12px;">
      <tr><td style="height:40px;font-weight:bold;">用户名：</td><td><input type="text" id="usernameLogin" style="height:20px;width:150px;"/>  </td>
   <td id="usernameError"></td></tr>
      <tr><td style="height:40px;font-weight:bold;">密  码：</td><td><input type="password" id="pwd" style="height:20px;width:150px;"/>  </td>
   <td id="passwordError"></td></tr>
      <tr><td style="height:40px;"></td><td><input type="button" style="height:25px;width:50px;" value="登陆" onclick="checkLogin()"/>
      <input type="button" style="height:25px;width:50px;" value="取消" onclick="clearLayer();"/></td></tr>
      </table>
</div>
</body>
</html>

<script>

function clearLayer() {
document.getElementsByTagName_r("body")[0].removeChild(document.getElementByIdx_x("bodyDiv"));
document.getElementByIdx_x("ControlLoginPanel").style.display = "none";
}

function checkLogin() {
var res = true;
var username = document.getElementByIdx_x("usernameLogin").value;
var password = document.getElementByIdx_x("pwd").value;
if (username!="user") {
  jQuery("#usernameError").html("用户名出错");
}
else if (password!="123456") {
  jQuery("#passwordError").html("用户密码出错");
  jQuery("#usernameError").html("");
}
else {
  jQuery("#usernameError").html("");
  jQuery("#passwordError").html("");
  clearLayer();
  jQuery("#myframe").attr("src","check.html");
}
}

function openFrame(){
//预置样式用于生成遮罩对象
var bodyStyle= {position:"absolute",left:"0",top:"0",zIndex:"9999",width:"100%",height:"999em",backgroundColor:"#000",filter:"alpha(opacity=50)",opacity:"0.5"};
var bodyDiv = document_createElement_x("div");//document.getElementsByTagName_r("body")[0].style.height="100%";
for(var i in bodyStyle) {
  bodyDiv.style[i]=bodyStyle[i];
}
bodyDiv.id="bodyDiv";
document.getElementsByTagName_r("body")[0].a(bodyDiv);
var　ControlLoginPanelDiv　=　document.getElementByIdx_x("ControlLoginPanel");
var style={position:"absolute",left:"50%",top:"50%",zIndex:"10000"}//预置样式用于生成 [主要内容] 的父容器对象
for(var i in style) {
  ControlLoginPanelDiv.style[i]=style[i];
}
//这里是得到一个marginTop值，那么就得用“网页卷去的高”加上自身高度的一半。
ControlLoginPanelDiv.style.marginTop=-(ControlLoginPanelDiv.scrollHeight/2)+((window.pageYOffset)?window.pageYOffset:document.documentElement.scrollTop)+"px";
ControlLoginPanelDiv.style.marginLeft=-(ControlLoginPanelDiv.scrollWidth/2)+"px";
ControlLoginPanelDiv.style.display="";
document.getElementsByTagName_r("body")[0].a(a);
document.getElementsByTagName_r("body")[0].style.height="100%";
return ;
}
</script>

点击“试一下”按钮之前：

标签：ue EF EA if ML

相关文章

