请高手指点......

    在JSP页面中我想实现如下的一个功能，请高手指点如何实现，最好给出代码示例，谢谢。
 
    我想点击某个按钮就弹出一个<div>区域板块(假设大小为200*200)，该板块上有一个“关闭”按钮，
一旦该区域板块弹出之后，就把页面中所有的区域变灰(即屏蔽掉，不可以操作)，单击该板块上的“关闭”
按钮后，该<div>区域板块就不显示了，页面就又可以操作了。请问这种效果怎么实现，非常谢谢。

解决方案 »

  1.   

    jquery有个blockUi插件
    就是这个功能的
      

  2.   

    http://malsup.com/jquery/block/position.html
    例子也挺简单的
      

  3.   

    cls_rewrite.js文件
    /** * 功能：显示提示窗口 * 转自CSDN */
    var alternateFrame = null;//生成的iframe
    var alternateWin = null;
    var img_url = "../";
    window.alert = showAlert;
    window.confirm = showConfirm;
    /**     * 人机交互窗口，覆盖自带的     */
    function alternateWindow() {
    this.win = null;//生成对话框的窗口对象
    this.pBody = null;//生成的body容器对象
    this.pBg = null;
    this.type = "alert";//默认的种类是alert
    this.FocusWhere = "OK";//焦点在哪个按钮上
    }
    /**     * 模仿的alert窗口     */
    function showAlert(info) {
    alternateWin = new alternateWindow();
    var pBody = alternateWin.init();
    alternateWin.initAlertBody(pBody, info);
    alternateWin.type = "alert";
    }
    /**     * 模仿的alert窗口     */
    function showConfirm(info) {
    alternateWin = new alternateWindow();
    var pBody = alternateWin.init();
    alternateWin.initConfirmBody(pBody, info);
    alternateWin.type = "confirm";
    }
    /**     * 作用：初始基本信息     */
    alternateWindow.prototype.init = function () {
    if (alternateFrame == null) {
    alternateFrame = document.createElement("<iframe allowTransparency='true' id='popframe' frameborder=0 marginheight=0 src='about:blank' marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>");
    alternateFrame.style.position = "absolute";
    document.body.appendChild(alternateFrame);
    } else {
    alternateFrame.style.visibility = "visible";
    }
    alternateFrame.style.width = screen.availWidth;
    alternateFrame.style.height = screen.availHeight;
    alternateFrame.style.left = document.body.scrollLeft;
    alternateFrame.style.top = document.body.scrollTop;
    alternateFrame.name = alternateFrame.uniqueID;
    this.win = window.frames[alternateFrame.name];
    this.win.document.write("<body leftmargin=0 topmargin=0 oncontextmenu='self.event.returnValue=false'><div id=popbg></div><div id=popbody></div><div></div></body>");
    this.win.document.body.style.backgroundColor = "transparent";
    document.body.style.overflow = "hidden";
    this.pBody = this.win.document.body.children[1];
    this.pBg = this.win.document.body.children[0];
    //this.hideAllSelect();
    this.initBg();
    return this.pBody;
    };
    /**    * 作用：初始化背景层  */
    alternateWindow.prototype.initBg = function () {
    with (this.pBg.style) {
    position = "absolute";
    left = "0";
    top = "0";
    width = "100%";
    height = "100%";
    visibility = "hidden";
    backgroundColor = "#333333";
    filter = "blendTrans(duration=1) alpha(opacity=30)";
    }
    this.pBg.filters.blendTrans.apply();
    this.pBg.style.visibility = "visible";
    this.pBg.filters.blendTrans.play();
    };
    /**     * 作用：初始化显示层     */
    alternateWindow.prototype.initAlertBody = function (obj, info) {
    with (obj.style) {
    position = "absolute";
    width = "400";
    height = "150";
    backgroundColor = "#ffffff";
    }
    obj.style.left = window.document.body.clientWidth / 2 - 200;
    obj.style.top = window.document.body.clientHeight / 3;
    var str;
    str = "<table border=0 cellpadding=0 cellspacing=1 bgcolor=#889faf width=100% height=100% style='margin:0px;padding:0px;'><tr height=30>";
    str += "<td align=left style='background-image:url(" + img_url + "img/system/tital2.jpg);color: #014b7c;text-align:left;padding-left:20px;font-weight:bold;height:25px;line-height:25px;border:0px solid #889faf;'>>>>\u63d0\u793a<<<</td></tr>";
    str += "<tr><td align=center bgcolor=#efefff style='background:#fff;text-align:center;height:120px;line-height:120px;border-left:0px solid #889faf;border-right:0px solid #889faf;'>";
    str += info + "</td></tr><tr height=30 bgcolor=#efefef><td align=center style='background:#EAF7FD;text-align:center;font-weight:bold;height:25px;line-height:25px; border:0px solid #889faf;'>" + "<input type='button' class='bttn' value='\u786e \u5b9a' id='OK' tabIndex='1'" + " onkeydown='parent.alternateWin.onKeyDown(event,this)'" + " onclick='parent.alternateWin.closeWin()'  tabIndex='2' style='BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CFECFA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid'>" + "</td></tr></table>";
    obj.innerHTML = str;
    this.win.document.body.all.OK.focus();
    this.FocusWhere = "OK";
    };
    alternateWindow.prototype.onKeyDown = function (event, obj) {
    switch (event.keyCode) {
      case 9:
    event.keyCode = -1;
    if (this.type == "confirm") {
    if (this.FocusWhere == "OK") {
    this.win.document.body.all.NO.focus();
    this.FocusWhere = "NO";
    } else {
    this.win.document.body.all.OK.focus();
    this.FocusWhere = "OK";
    }
    } else {
    if (this.type = "alert") {
    this.win.document.body.all.OK.focus();
    }
    }
    break;
      case 13:
    obj.click();
    break;
      case 27:
    this.closeWin();
    break;
    }
    };
    /**     * 作用：初始化显示层 conFirm提示层     */
    alternateWindow.prototype.initConfirmBody = function (obj, info) {
    with (obj.style) {
    position = "absolute";
    width = "400";
    height = "150";
    backgroundColor = "#ffffff";
    }
    obj.style.left = window.document.body.clientWidth / 2 - 200;
    obj.style.top = window.document.body.clientHeight / 3;
    var str;
    str = "<table border=0 cellpadding=0 cellspacing=1 bgcolor=#889faf width=100% height=100% style='margin:0px;padding:0px;'><tr height=30>";
    str += "<td align=left style='background-image:url(" + img_url + "img/system/tital2.jpg);color: #014b7c;text-align:left;padding-left:20px;font-weight:bold;height:25px;line-height:25px;border:0px solid #889faf;'>>>>\u8be2\u95ee<<<</td></tr>";
    str += "<tr><td align=center bgcolor=#efefff style='background:#fff;text-align:center;height:120px;line-height:120px;border-left:0px solid #889faf;border-right:0px solid #889faf;'>";
    str += info + "</td></tr><tr height=30 bgcolor=#efefef><td align=center style='background:#EAF7FD;text-align:center;font-weight:bold;height:25px;line-height:25px; border:0px solid #889faf;'>" + "<input type='button' class='bttn' id='OK'" + " onkeyup='parent.alternateWin.onKeyDown(event,this)'" + " onclick='parent.alternateWin.closeWin();parent.clk_yes();' " + " value='\u786e \u5b9a' style='BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CFECFA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid'>" + "&nbsp;&nbsp;&nbsp;<input type='button' class='bttn' value='\u53d6 \u6d88' id='NO'" + " onkeydown='parent.alternateWin.onKeyDown(event,this)'" + " onclick='parent.alternateWin.closeWin();parent.clk_no();' style='BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CFECFA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid'><input type='button' style='width:0px' value=1></td></tr></table>";
    obj.innerHTML = str;
    this.win.document.body.all.OK.focus();
    };
    /**     * 作用：关闭一切     */
    alternateWindow.prototype.closeWin = function () {
    alternateFrame.style.visibility = "hidden";
    //this.showAllSelect();
    //document.body.style.overflow = "auto";
    };
    /**      * 作用:隐藏所有的select      */
    alternateWindow.prototype.hideAllSelect = function () {
    var obj;
    obj = document.getElementsByTagName("SELECT");
    var i;
    for (i = 0; i < obj.length; i++) {
    obj[i].style.visibility = "hidden";
    }
    };
    /**     * 显示所有的select     */
    alternateWindow.prototype.showAllSelect = function () {
    var obj;
    obj = document.getElementsByTagName("SELECT");
    var i;
    for (i = 0; i < obj.length; i++) {
    obj[i].style.visibility = "visible";
    }
    };//页面实现可以重写以下函数 by gy
    function clk_alert() {
    }
    function clk_yes() {
    }
    function clk_no() {
    }
    HTML文件<script type="text/javascript" src="cls_rewrite.js"></script>
    aaa : <input name="a" type="button" onclick="alert('1111111111111111');" value="按钮">
      

  4.   


    <div stype="displsy:none;position:absolute;width:100%;height:100%;z-index:100;filter:background-color:#1E1E1E;opacity:0.3;filter:alpha(opacity=30);" id="bg">
    <input type="button" value="关闭" onclick="disp()"></div><input type="button" value="遮盖" onclick="hid()">function hide(){
       document.getElementById("bg").style.display="block";
    }function disp(){
       document.getElementById("bg").style.display="none";
    }
      

  5.   


    简单的JqueryUI效果更漂亮...
    如thickBox等...
      

  6.   

    类似百度知道的登录页面？这个是js的问题 和jsp没啥关系
      

  7.   

    用JQUERY,或Javascript都可以
       正解已经在楼上给出了
      

  8.   

    我有一个好的见面例子.http://springrts.com/media.php等页面加载完后,点击图片就会有效果了.
    js可以偷下来