用DIV模拟模式窗口

最新推荐文章于 2021-07-05 03:49:05 发布

feiji1111

最新推荐文章于 2021-07-05 03:49:05 发布

阅读量260

点赞数

文章标签： jQuery JSP CSS UI HTML ViewUI

这个东西是我在使用jquery之前用的东西，当时还处于小鸟阶段，废话就不说了，直接给出代码

1.index.jsp
-----------------------------------------------------------------------------------------------------------------------------------------
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index.jsp</title>
<link rel="stylesheet" type="text/css" href="/model.css">
<script type="text/javascript" src="/model.js"></script>
</head>
<body>
<div id="main" align="center">
请选择
<select name="sel" id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="打开层" οnclick="javascript:calldisp();">
</div>
<div style="display: none;">
<div align="center" class="maincontext" id="maincontext">
<div id="divtitle" class="divtitle">标题<a class="closez" οnclick="javascript:logoutdisp();">关闭</a></div>
<div id="divcontext" class="divcontext">
你爷爷的爷爷:<select name="sele">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<p>填入其他代码</p>
<div>输入：<input type="text"/></div> 
<div class="divbutton">
<input id="button" class="button" type="button" value="确定" οnclick="javascript:alert('提交');">
</div>
</div>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------
2.model.js
-----------------------------------------------------------------------------------------------------------------------------------------
/* 动态创建背景层； */
function _ungroupay() {
var node = document.getElementById('sysbackgroupdis');
if (!node) {
node = document.createElement('div');
node.setAttribute('id', 'sysbackgroupdis');
node.style.visibility = 'hidden';
node.style.height = document.body.clientHeight + 'px';
node.style.width = document.body.clientWidth + 'px';
node.style.background = '#999';
node.style.opacity = '0.5';
node.style.filter = 'alpha(opacity=60)';
node.style.position = 'absolute';
node.style.top = '-9999px';
document.body.appendChild(node);
}
node.style.top = '0px';
node.style.left = '0px';
node.style.visibility = 'visible';
node.style.zIndex = 1;
}
/*页面显示类容*/
_systemplate = "<div align=\"center\" class=\"maincontext\" id=\"maincontext\">"+
"<div id=\"divtitle\" class=\"divtitle\">标题<a class=\"closez\" οnclick=\"javascript:logoutdisp();\">关闭</a></div>"+
"<div id=\"divcontext\" class=\"divcontext\">你爷爷的爷爷:<select name=\"sele\">"+
"<option value=\"1\">1</option><option value=\"2\">2</option><option value=\"3\">3</option><option value=\"4\">4</option></select>"+
"<input type=\"button\" value=\"确定\" οnclick=\"javascript:alert('提交');\"><p>填入其他代码</div></div>";

/* 创建调度函数 */
function calldisp() {
_ungroupay();
var node = document.getElementById('onbackground');
if (!node) {
node = document.createElement('div');
node.setAttribute('id', 'onbackground');
node.style.visibility = 'hidden';
node.style.top = '-9999px';
node.style.position = 'absolute';
node.style.border = '1px';
node.style.borderColor = 'black';
node.style.borderStyle = 'solid';
node.innerHTML = document.getElementById('maincontext').innerHTML;
document.body.appendChild(node);
}
node.style.top = Math.floor(document.body.scrollTop+(document.body.clientHeight-node.offsetHeight)/2)+'px';
node.style.left = Math.floor(document.body.scrollLeft+(document.body.clientWidth-node.offsetWidth)/2)+'px';
node.style.visibility='visible';
node.style.zIndex = 999;
}
/*退出层*/
function logoutdisp() {
var layerNode = document.getElementById("onbackground");
var underLayerNode = document.getElementById("sysbackgroupdis");
if (layerNode) {
layerNode.style.visibility="hidden";
layerNode.style.top = "-9999px";
}
if (underLayerNode) {
underLayerNode.style.visibility="hidden";
underLayerNode.style.top = "-9999px";
}
}
-----------------------------------------------------------------------------------------------------------------------------------------
3.model.css
-----------------------------------------------------------------------------------------------------------------------------------------
.divtitle{
width: 200px;
height: 18px;
background-image: url('/imgs/2.jpg');
font-size: small;
font-weight: bold;
}
.closez{
cursor: pointer;
padding-left:110px;
}
.divcontext{
font-size: smaller;
border:1px solid red;
width: 200px;
height: 100px;
background-color: white;
}
.divbutton{
padding-left: 150px;
}

现在这个东西都已经不用了，个人觉得jquery里面的东西特别是ui还是比较全比较简单的