首页 > 代码库 > DIV/SPAN通用子窗口展现、关闭JS接口
DIV/SPAN通用子窗口展现、关闭JS接口
子窗口通用接口，基于jQuery支持使用。目前设计时，使用的是1.7.2版。FF默认焦点未失去问题存在。
HTML & JS：
<html>
<head>
<title></title>
<script charset="GB2312" type="text/javascript" src="http://www.mamicode.com/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
var flag = true;
$(document).ready(function() {
// 确认处理
$("#butn").click(function() {
if (flag) {
openArea("InfoWndw", "<input type=\"button\" id=\"clos\" value=http://www.mamicode.com/"关闭\" onclick=\"javascript:closArea(‘InfoWndw‘);\"/>MSGE CONT.", "1");
flag = false;
} else {
openArea("InfoWndw", "<table border=‘1‘><tr><td>HTML TABL CONT</td></tr></table>", ‘1‘ );
flag = true;
}
});
});
// 子窗口打开
function openArea(itemId, cont, type) {
// 锁定背景区域显示
$("#DVID_LOCK_VIEW").show(500);
// 窗口展示内容设置
if ("1" == type) {
// 追加内容
$("#" + itemId).append(cont);
} else if ("2" == type) {
// 设定内容
$("#" + itemId).text(cont);
} else {
// 设定HTML
$("#" + itemId).html(cont);
}
// 区域左上角上边距
var areaTidx = 0;
// 区域左上角左边距
var areaLidx = 0;
// 窗口高度
var wndwHigh = $(window).height();
// 窗口宽度
var wndwWdth = $(window).width();
// 区域高度
var areaHigh = $("#" + itemId).height();
// 区域宽度
var areaWdth = $("#" + itemId).width();
// 左上角起始位置计算（上边距）
if (wndwHigh > areaHigh) {
// 窗口高度大于区域高度时，计算上边距中间位置
areaTidx = (wndwHigh - areaHigh) / 2;
}
// 左上角起始位置计算（左边距）
if (wndwWdth > areaWdth) {
// 窗口宽度大于区域宽度时，计算左边距中间位置
areaLidx = (wndwWdth - areaWdth) / 2;
}
// // 各属性节点的属性值测试信息
// alert("窗口：H-W : " + wndwHigh + ":" + wndwWdth + "\r\n区域：H-W : " + areaHigh + ":" + areaWdth + "\r\n位置：H-W : " + areaTidx + ":" + areaLidx);
// 左上角定位设置
$("#" + itemId).css("top", areaTidx).css("left", areaLidx);
// 区域模块显示
$("#" + itemId).show(1000);
// 焦点移入
$("#" + itemId).focus();
}
// 子窗口关闭
function closArea(itemId) {
// 区域模块显示
$("#" + itemId).empty();
// 区域模块显示
$("#" + itemId).hide(500);
// 锁定背景区域清理
$("#DVID_LOCK_VIEW").hide(1000);
}
</script>
</head>
<body>
<!--
W:<input id="wdth"/>
H:<input id="high"/>
-->
<input type="button" id="butn" value="http://www.mamicode.com/显示"/>
<div id="DVID_LOCK_VIEW" style="display:none;position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#336699;z-index:9998;-moz-opacity:0.6;opacity:.60;filter:alpha(opacity=60);"></div>
<span id="InfoWndw" style="position:absolute;background:#6699CC;display:none;z-index:9999;"></span>
</body>
</html>
LvCreator 版权所有...
DIV/SPAN通用子窗口展现、关闭JS接口
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。