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

原创
2014/12/11 16:23
阅读数 62

子窗口通用接口,基于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 版权所有...

展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部