方法一：在body中輸入如下程式碼

<div id=win style="display:none; POSITION:absolute; left:50%; top:50%; width:600px; height:400px; margin-left:-300px; margin-top:-200px; border:1px solid #888; background-color:#edf; text-align:center">這是DIV登入框示例<br><a href="javascript:closeLogin();">關閉登入框</a></div>
<script>
function openLogin(){
   document.getElementById("win").style.display="";
}
function closeLogin(){
   document.getElementById("win").style.display="none";
}
</script>
<a href="javascript:openLogin();">開啟登入框</a>
 

方法二：在body中輸入如下程式碼

<script>
function openLogin(){
   document.getElementById("win").style.display="";
   document.getElementById("back").style.display="";
}
function closeLogin(){
   document.getElementById("win").style.display="none";
   document.getElementById("back").style.display="none";
}
</script>
<a href="javascript:openLogin();">開啟登入框</a>
<div id="back" style="display:none; POSITION:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; filter:alpha(opacity=60)"></div>
<div id="win" style="display:none; POSITION:absolute; left:50%; top:50%; width:600px; height:400px; margin-left:-300px; margin-top:-200px; border:1px solid #888; background-color:#edf; text-align:center">這是DIV登入框示例<br><a href="javascript:closeLogin();">關閉登入框</a></div>
 

文章轉自：https://zhidao.baidu.com/question/1493843355259709779.html