Javascript implémente une simple fenêtre contextuelle_javascript skills-js tutoriel-php.cn

Javascript implémente une simple fenêtre contextuelle_javascript skills

WBOY

Libérer： 2016-05-16 15:14:24

original

1426 Les gens l'ont consulté

Introduction à la fonction : cliquez sur un bouton et une fenêtre apparaîtra sur la page. Le contenu original de la page restera inchangé, mais un calque de masque sera ajouté à la page et l'opacité sera définie. La fenêtre supérieure peut être définie en position fixe, peut également être définie librement, ce qui est généralement visible dans les boutons de connexion du site Web.

page html :

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现一个弹出框</title>
<style type="text/css">
/*预先写好弹出窗的样式*/
#menu{height: 900px;}
#close{ 
  width:30px; 
  height:30px; 
  cursor:pointer; 
  position:absolute; 
  right:5px; 
  top:5px; 
  text-indent:-999em;
  background-color:blue;
  }
#mask{ 
  background-color:pink;
  opacity:0.5;
  filter: alpha(opacity=50); 
  position:absolute; 
  left:0;
  top:0;
  z-index:1;
  }
#login{ 
  position:fixed;
  z-index:2;
  }
.loginCon{ 
  position:relative; 
  width:670px;
  height:380px;
  /*background:url(img/loginBg.png) #2A2C2E center center no-repeat;*/
  background-color: #ccc;
  }
</style>

</head>
<body>
<div id="menu">
  <div id="login-area">
   <button id="btnLogin">登录</button>
  </div>
</div>
</body>
</html>

Copier après la connexion

code js :

<script>
function openNew(){
  //获取页面的高度和宽度
  var sWidth=document.body.scrollWidth;
  var sHeight=document.body.scrollHeight;
  
  //获取页面的可视区域高度和宽度
  var wHeight=document.documentElement.clientHeight;
  
  var oMask=document.createElement("div");
    oMask.id="mask";
    oMask.style.height=sHeight+"px";
    oMask.style.width=sWidth+"px";
    document.body.appendChild(oMask);
  var oLogin=document.createElement("div");
    oLogin.id="login";
    oLogin.innerHTML="<div class='loginCon'><div id='close'>关闭</div></div>";
    document.body.appendChild(oLogin);
  
  //获取登陆框的宽和高
  var dHeight=oLogin.offsetHeight;
  var dWidth=oLogin.offsetWidth;
    //设置登陆框的left和top
    oLogin.style.left=sWidth/2-dWidth/2+"px";
    oLogin.style.top=wHeight/2-dHeight/2+"px";
  //点击关闭按钮
  var oClose=document.getElementById("close");
  
    //点击登陆框以外的区域也可以关闭登陆框
    oClose.onclick=oMask.onclick=function(){
          document.body.removeChild(oLogin);
          document.body.removeChild(oMask);
          };
          };
          
  window.onload=function(){
      var oBtn=document.getElementById("btnLogin");
        //点击登录按钮
        oBtn.onclick=function(){
          openNew();
          return false;
          }
        
    }
</script>

Copier après la connexion