请教一下，弹出的一些小窗口怎么实现？

例如有些网页、论坛之类，回帖的时候它会弹出一个小窗口（登录窗口、回复等），而原来的页面就暗下来，这个效果怎么实现的？

解决方案 »

  1.   

    模式窗口jwindow,div
    http://www.open-open.com/ajax/Window.htm
      

  2.   

    一般有几种形式：
    1。在本页面使用Div+JS隐藏和显示，但这样不好，如果页面本来就很复杂,这样做效率问题不好。
    2。使用iframe来弹出一个页面，这个效果不错。
      

  3.   

    可以用一个iframe来实现
    这样就能盖住select
      

  4.   

    window.open()
    window.showModalDialog()
      

  5.   

    一般是做两个DIV，一个div用滤镜设置透明度，把整个网页遮罩，另一个div设置大小zindex大于那个透明的DIV，让其浮于透明div之上，上面放登录控件等等，这样就实现了楼主说的要求
      

  6.   


    但是上面那个div的位置怎么固定呢？编辑的时候又放在哪里？
      

  7.   

    网页对话框 不是太好吧
    好多都是搞div模拟的对话框
      

  8.   

    一般都是div遮罩,用jquery或者ext比较方便
      

  9.   

    js +Div 也可以<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" AspCompat="true" %><!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 runat="server">
        <title></title>
      <script type="text/javascript" language="javascript">
          function ShowNo() {
              document.getElementById("doing").style.display = "none";
              document.getElementById("divLogin").style.display = "none";
          }
          function $(id) {
              return (document.getElementById) ? document.getElementById(id) : document.all[id];
          }
          function showFloat() {
              var range = getRange();
              $('doing').style.width = range.width + "px";
              $('doing').style.height = range.height + "px";
              $('doing').style.display = "block";
              document.getElementById("divLogin").style.display = "";
          }
          function getRange() {
              var top = document.body.scrollTop;
              var left = document.body.scrollLeft;
              var height = document.body.clientHeight;
              var width = document.body.clientWidth;          if (top == 0 && left == 0 && height == 0 && width == 0) {
                  top = document.documentElement.scrollTop;
                  left = document.documentElement.scrollLeft;
                  height = document.documentElement.clientHeight;
                  width = document.documentElement.clientWidth;
              }
              return { top: top, left: left, height: height, width: width };
          } 
    </script> <style type="text/css"> 
    body{margin:0px;} 
    </style> 
    </head>
    <body> 
    <form id="form1" runat="server"> 
    <a href="javascript:void(0)" onclick="showFloat()" style=" text-align:center;">评论 </a> <div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;position: absolute;left:0;top:0;display:none;overflow: hidden;"> 
    </div> <div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:300;z-index:1001; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -400px;width:300px; height:300px;"> 
     <div>账号：<input  type="text"/></div>
     <div>密码：<input  type="text"/></div>
    </div> 
    </form> 
    </body> </html>