文档章节

DIV/SPAN通用子窗口展现、关闭JS接口

LvAI
 LvAI
发布于 2014/12/11 16:23
字数 495
阅读 53
收藏 2

子窗口通用接口,基于jQuery支持使用。目前设计时,使用的是1.7.2版。FF默认焦点未失去问题存在。

HTML & JS: 

<html>
    <head>
        <title></title>
        <script charset="GB2312" type="text/javascript" src="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=\"关闭\" 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="显示"/>
        <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 版权所有...

© 著作权归作者所有

LvAI
粉丝 0
博文 18
码字总数 6297
作品 0
丰台
架构师
私信 提问
Javascript 实现倒计时(10秒)自动关闭网页

JS倒计时10秒 实现功能 实例代码一: <html> <title>倒计时关闭网页</title> <head> <script language="javascript"> var cTime=10;//这个变量是倒计时的秒数设置为10就是10秒 function Tim......

leiboo
2014/04/27
0
0
Java在线并发控制word文档

前言: 对于在线操作word文档的OA系统来说有一个常见问题,就是对于服务端放置的word文档,如果有两个人甚至更多客户端同时打开该文档时,就会存在并发问题。有了并发问题就会出现操作的文档保存...

山里的红杏
2018/11/19
0
0
求大神指教!!

<%@ page contentType="text/html; charset=UTF-8" %> 柯桥妇保系统 <% String contextPath = request.getContextPath(); String usercnname = (String)request.getAttribute("usercnname")......

为你画地为牢
2018/03/08
118
0
如何提取该段代码的“背景”图片?

❥°蔓蔓﹏๑的我秀直播间 - 56秀场,美女直播,互动交友,视频聊天,在线K歌 - xiu.56.com 56视频 首页 视频 直播 空间 我贴 相册 频道v 资讯 原创 影视 游戏 娱乐 母婴 汽车 旅游 女性 体育 亚...

yolo
2012/08/08
1K
0
iscroll pc端正常拉动 手机端异常

代码部分--------------- 找货 找货 下拉重新加载页面 <#list page as orderlo> ${orderlo.fromb}${orderlo.froms} 至 ${orderlo.tob}${orderlo.tos} 发货时间:${orderlo.thsj} 至 ${orderl......

ousiew
2017/03/08
168
0

没有更多内容

加载失败,请刷新页面

加载更多

Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
2
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
6
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
3
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部