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

浏览数：26 / 时间：2015年06月09日

子窗口通用接口，基于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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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