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

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

TnQin

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

阅读量3.5k

点赞数

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

本文链接：https://blog.csdn.net/TnQin/article/details/7736465

版权

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

摘要由CSDN通过智能技术生成

在坐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:1