Js实现主页面中显示/隐藏层的效果

最新推荐文章于 2019-02-11 15:37:15 发布

TnQin

最新推荐文章于 2019-02-11 15:37:15 发布

阅读量3.6k

点赞数

分类专栏： J2EE篇文章标签： border function input javascript div button

本文链接：https://blog.youkuaiyun.com/TnQin/article/details/7736465

版权

J2EE篇专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在JSP界面中通过JavaScript实现主页面点击按钮后弹出小界面，同时主界面被锁定的方法。通过改变`document.getElementById('Div').style.display`的值来控制层的隐藏与显示。示例中使用了`show.js`脚本来处理显示和隐藏逻辑，以及HTML代码来创建界面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在坐Jsp界面Ajax效果时，总想实现主界面中，单击按钮弹出个小界面，使得主界面处于被锁状态，弹出的小界面方便我们编辑数据。有很多方式都可以解决，参考其它系统中的一种方式，实现起来比较方便：即 document.getElementById('Div').style.display设置其熟悉值来实现层的隐藏或显示。

准备工作：

一、编辑test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/show.js"></script>
</head>
<body>
    <input type="submit" id="showid" value="show" οnclick="javaScript:showdiv('divShow');" />

    <div id="sDiv" style="
               filter:alpha(opacity=30);
               -moz-opacity:0.3;opacity:0.3;
              background-color:#fff;
              width:100%;
              height:100%;
              z-index:1000;
              position: absolute;
              left:0px;
              top:0px;
              display:none;
              overflow: hidden;
              margin:0 auto;">
   <iframe style="position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;scrolling:no;"
   frameborder="0" src="about:blank"></iframe>

</div>

<div id="divShow"
       style="border:solid 1px #6FA3D2;
       background:#fff;padding:0px;
       height:200px;width:400px;
       z-index:1001; position: absolute;
       display:none;
       top:50%; left:50%;
       margin:-170px 0 0 -200px;">


    <form id="frmtest" name="frmtest" method="post">

  <input type="hidden" id="operFlag" name="operFlag" value="">

  <TABLE cellpadding="0" cellspacing="0" width="100%" border="0" >



  <TR>
   <TD height="24">
    <TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
    <TR>
      <TD height="5" colspan="2">
        </TD>

    </TR>
    <TR>
      <TD align="center" valign="middle">
        标题</TD>
     </TR>
    </TABLE>
   </TD>
  </TR>
  <TR>
   <TD>
    <TABLE cellpadding="0" cellspacing="0" border="0" width="98%" align="center">
    <TR>
     <TD height="5" colspan="2">

     </TD>
    </TR>



        <TR id="div_testId">
            <TD>ID:</TD>
            <TD>
              <INPUT type="text" readonly="readonly" class="textBox-readonly" id="txt_Id" name="txt_Id" value="">
            </TD>
        </TR>




    <TR>
     <TD>名称:<br></TD>
        <TD >
          <input name="txt_Name" id="txt_Name" maxlength="20" type="text" value=""/>
         <font color="FF0000">**</font>
       <br></TD>
    </TR>
    <TR>
     <TD>全称:<br></TD>
        <TD >
          <input name="txt_uName" id="txt_uName" maxlength="20" type="text" value=""/>
         <font color="FF0000">**</font>
       <br></TD>
    </TR>



    <TR>
      <TD height="5"></TD>
    </TR>

    <tr>
     <td colspan='2' align="center"><INPUT type="button" value="保存" οnclick="" style="width:63px">  
       <INPUT TYPE="button" value="取消" οnclick="javaScript:showNo('divShow');" style="width:63px">  </td>
    </tr>

    </TABLE>
   </TD>
  </TR>
  </TABLE>
  </form>

    </div>

</body>
</html>

二、 show.js

function showFloat(subdiv)                    //display two div
        {
            //alert("subdiv:" + subdiv);
            var range = getRange();
            alert(range.height);
            document.getElementById('sDiv').style.width = range.width + "px";
            document.getElementById('sDiv').style.height = range.height + "px";
            document.getElementById('sDiv').style.display = "block";
            document.getElementById(subdiv).style.display="";
        }

function getRange()                      //get screen size
{
      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 } ;
}

function showdiv(subDiv){

var vOperFlag = document.getElementById("divShow");
vOperFlag.value = "insert";

var vTxtUserId = document.getElementById("txt_Id");
var vTxtLoginName = document.getElementById("txt_Name");
var vTxtUserName = document.getElementById("txt_uName");
vTxtUserId.value = "";
vTxtLoginName.value= "";
vTxtUserName.value = "";

var divUser = document.getElementById("div_testId");
divUser.style.display = "none";

showFloat(subDiv);

}

function showNo(subDiv){

document.getElementById('sDiv').style.display = "none";
document.getElementById(subDiv).style.display="none";
}