请问图中的弹出窗体样式是怎么实现的?

用javaScript
window.open()

<!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" lang="zh-CN">
<head>

<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<meta name="description" content="网页特效代码" />
<meta name="keywords" content="网页特效,网页特效代码" />

<title>网页特效|网页特效代码(JsHtml.cn)---点击弹出窗口层，并且背景变暗渐变</title><style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
    z-index:10001;
    width:500px;
    height:400px;
    background:white;
    border:#336699 1px solid;
    position:absolute;
    left:50%;
    top:20%;
    font-size:12px;
    margin-left:-225px;
    display: none;
}
#bgDiv {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
    opacity: 0.6;
}
</style>
<script type="text/javascript">
function showDetail() { //www.jshtml.cn
//背景
  var bgObj=document.getElementById("bgDiv");
  bgObj.style.width = document.body.offsetWidth + "px";
  bgObj.style.height = screen.height + "px";
//定义窗口
  var msgObj=document.getElementById("msgDiv");
  msgObj.style.marginTop = -75 +  document.documentElement.scrollTop + "px";
//关闭
  document.getElementById("msgShut").onclick = function(){
  bgObj.style.display = msgObj.style.display = "none";
  }
  msgObj.style.display = bgObj.style.display = "block";
  msgDetail.innerHTML="<p align=center>小窗口里的内容</p><p align=center><A href=http://www.jshtml.cn><FONT color=#0000ff>网页特效代码</FONT></A></p>"
}
</script>
</head>
<body>
<div id="msgDiv">
<div id="msgShut">
  关闭</div>
<div id="msgDetail">
</div>
</div>
<div id="bgDiv">
</div>
<p>　</p>
<p><a href="#" onClick="showDetail()">点击我试试看</a></p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>更多网页特效代码尽在 <a href="http://www.jshtml.cn/">网页特效代码</a></p>
</body>
</html>

下面给两个弹出屏幕居中窗口的例子
   window.open()方式
       function ShowDialog(url) {
           var iWidth=300; //窗口宽度
           var iHeight=200;//窗口高度
           var iTop=(window.screen.height-iHeight)/2;
           var iLeft=(window.screen.width-iWidth)/2;
           window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,
     Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft);
          }

   window.showModalDialog方式
     function ShowDialog(url) {
           var iWidth=300; //窗口宽度
           var iHeight=200;//窗口高度
           var iTop=(window.screen.height-iHeight)/2;
           var iLeft=(window.screen.width-iWidth)/2;
           window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;
     dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no");
         }

下面给两个弹出屏幕居中窗口的例子
  window.open()方式
      function ShowDialog(url) {
          var iWidth=300; //窗口宽度
          var iHeight=200;//窗口高度
          var iTop=(window.screen.height-iHeight)/2;
          var iLeft=(window.screen.width-iWidth)/2;
          window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,
    Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft);
          }

  window.showModalDialog方式
    function ShowDialog(url) {
          var iWidth=300; //窗口宽度
          var iHeight=200;//窗口高度
          var iTop=(window.screen.height-iHeight)/2;
          var iLeft=(window.screen.width-iWidth)/2;
          window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;
    dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no");
        }
不错的。

看样子好像不是一个窗体，不过用CSS可以实现。具体怎么做的只有开发的人知道，呵呵，方法太多了。

调试易

请问图中的弹出窗体样式是怎么实现的?

解决方案 »