打开 http://www.salesforce.com/cn/ ,然后点“观看演示”按钮,可以看到页面变暗并成了背景,并出了一个白色框,这就好象是桌面软件显示一个模态窗口那样。点查看源文件,却是空白的,什么也没有。
请问:这个页面效果是怎么做出来的?用PHP怎么实现?这类网页如何查看源文件?

解决方案 »

  1.   

    用firefox,ctrl+A,查看选中部分源代码
      

  2.   

    应该是jQuery做的UI,好多站都在用管理员把这贴扔过js版吧
      

  3.   

    你看看这个行不:<!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=gb2312" />
    <title>弹出提示</title>
    <style>
    * {margin:0;padding:0;font-size:12px;}
    html,body {height:100%;width:100%;}
    #content {background:#f8f8f8;padding:30px;height:100%;}
    #content a {font-size:30px;color:#369;font-weight:700;}
    #alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}
    #alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}
    #alert h4 span {float:left;}
    #alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;}
    #alert p {padding:12px 0 0 30px;}
    #alert p input {width:120px;margin-left:20px;}
    #alert p input.myinp {border:1px solid #ccc;height:16px;}
    #alert p input.sub {width:60px;margin-left:30px;}
    </style>
    </head>
    <body>
    <div id="content">
    <a href="#">注册</a>
    </div>
    <div id="alert">
    <h4><span>现在注册</span><span id="close">关闭</span></h4>
    <p><label>用户名</label><input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>
    <p><label>密 码</label><input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>
    <p><input type="submit" value="注册" class="sub" /><input type="reset" value="重置" class="sub" /></p>
    </div>
    <script type="text/javascript">
    /**
    *Author:银子
    *Date:2007/10/11
    */
    var myAlert = document.getElementById("alert");
    var reg = document.getElementById("content").getElementsByTagName("a")[0];
    var mClose = document.getElementById("close");
    reg.onclick = function()
    {
    myAlert.style.display = "block";
    myAlert.style.position = "absolute";
    myAlert.style.top = "50%";
    myAlert.style.left = "50%";
    myAlert.style.marginTop = "-75px";
    myAlert.style.marginLeft = "-150px";
    mybg = document.createElement("div");
    mybg.setAttribute("id","mybg");
    mybg.style.background = "#000";
    mybg.style.width = "100%";
    mybg.style.height = "100%";
    mybg.style.position = "absolute";
    mybg.style.top = "0";
    mybg.style.left = "0";
    mybg.style.zIndex = "500";
    mybg.style.opacity = "0.3";
    mybg.style.filter = "Alpha(opacity=30)";
    document.body.appendChild(mybg);document.body.style.overflow = "hidden";
    }
    mClose.onclick = function()
    {
    myAlert.style.display = "none";
    mybg.style.display = "none";
    }
    </script>
    <script type="text/javascript" src="../js.js"></script>
    </body>
    </html>
      

  4.   

    背景是这个<div id="fancybox-overlay" style="width: 1423px; background-color: rgb(197, 229, 247); opacity: 0.8; cursor: auto; height: 1465px; display: block; "></div>
      

  5.   

    采用遮罩的弹出DIV。确切的说那个遮罩也是个div