【原】JS点击层外任何地方关闭层

zoukankan html css js c++ java

【原】JS点击层外任何地方关闭层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
    <style type="text/css">
        .planFinderLink
        {
            font-size: 13px;
            color: #365cb7;
            text-decoration: underline;
        }

        /* Overlay */
        #uploadAttachment-simplemodal-overlay
        {
            background-color: #365cb7;
            z-index: 1001;
            position: fixed;
            filter: alpha(opacity=50);
            width: 100%; /* 1420px */
            zoom: 1;
            height: 100%;
            top: 0px;
            left: 0px;
        }

        /* Container */
        #uploadAttachment-simplemodal-container
        {
            background: url(/qiprom1/images/framework/modal-bkgrd.gif) repeat-x;
            background-color: #fff;
            padding: 0 5px 25px 5px;
            border: 1px solid #c4c8cc;
            -moz-box-shadow: 2px 2px 10px #333;
            -webkit-box-shadow: 2px 2px 10px #333;
            z-index: 1002;
            position: fixed;
            width: 470px;
            height: 209px;
            top: 190px;
            left: 469px;
            findfakeobj: 1;
        }
        .uploadAttachment-simplemodal-wrap
        {
            outline-style: none;
            outline-color: invert;
            outline-width: 0px;
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript" >
        document.onclick = check;
        function check(e) {
            var div_container = document.getElementById("uploadAttachment-simplemodal-container");
            var div_overlay = document.getElementById("uploadAttachment-simplemodal-overlay");

            if (div_container.style.display != "none") {
                var t = (e && e.target) || (event && event.srcElement);
                var b = document.getElementById("btn_attachApplication");
                if (t != div_container && t != b) {
                    div_container.style.display = "none";
                    div_overlay.style.display = "none";
                }
            }
        }

        $(document).ready(function () {
            // Upload Attachment
            $('#btn_attachApplication').click(function (e) {
                $('#uploadAttachment-simplemodal-overlay').show();
                $('#uploadAttachment-simplemodal-container').show();
            });

            $('#btn_Close').click(function (e) {
                $('#uploadAttachment-simplemodal-overlay').hide();
                $('#uploadAttachment-simplemodal-container').hide();
                return false;
            });

            $('#uploadAttachment-simplemodal-container').click(function (event) { event.stopPropagation(); });
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="uploadAttachment-simplemodal-overlay" style="display: none;">
    </div>
    <div id="uploadAttachment-simplemodal-container" style="display: none;">
        <div class="uploadAttachment-simplemodal-wrap">
            <div id="div_uploadAttachment">
                <table border="0" class="table-02">
                    <tr>
                        <td colspan="2" class="fontsize-12 fontweight-bold">
                            Add File
                        </td>
                    </tr>
                    <tr>
                        <td>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                    <tr>
                        <th style="border-top: none;  50%;">
                            Name
                        </th>
                        <th style="border-top: none;">
                            File Src
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <input class="textbox-height textbox-bkgrd" type="text" id="txt_name1" name="txt_name1"
                                value="" />
                        </td>
                        <td>
                            <input type="file" id="uploadFile1" name="uploadFile1" style=" 200px;" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="right">
                            <button class="btn_large btn_gray basic" id="btn_Close">
                                <span><em>Close</em></span></button>
                            <button class="btn_large btn_orange basic" onclick="checkUpload(); return false;">
                                <span><em>Upload</em></span></button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <button class="button-lrg-blue" type="button" style="text-align: left;" id="btn_attachApplication">
        Attach Application</button>
    </form>
</body>
</html>

查看全文

相关阅读:
Go复习--为何不允许重载overload？
Go疑问-1
Go复习--for循环陷井
 Go复习--slice协程不安全
 Go复习之久违的goto语句
 Go复习---编译错误：undefined:
Linux 环境拷贝文件发生的错误
 【转载】java数据库操作
 VBA文件处理
 【转】关于C#使用Excel的数据透视表的例子

原文地址：https://www.cnblogs.com/luckylei66/p/2708606.html