不透明弹出 window

Question

我从 google 中找到了这段代码，它工作正常，但弹出窗口 window 是透明的，我想让它不透明。（我知道弹出 window 是透明的，因为如果我放大浏览器我可以看到弹出 window 与背景内容重叠并且背景内容可见）

这里是 link 代码：

<HTML>
<HEAD>
    <TITLE>Popup div with disabled background</TITLE>
    <style>
        .ontop {
            z-index: 9999;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
            position: absolute;             
            background-color: #cccccc;
            color: #aaaaaa;
            opacity: .8;
            filter: alpha(opacity = 80);
        }
        #popup {
            width: 300px;
            height: 200px;
            position: absolute;
            color: #000000;
            background-color: #ffffff;
            /* To align popup window at the center of screen*/
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
        }
    </style>
    <script type="text/javascript">
        function pop(div) {
            document.getElementById(div).style.display = 'block';
        }
        function hide(div) {
            document.getElementById(div).style.display = 'none';
        }
        //To detect escape button
        document.onkeydown = function(evt) {
            evt = evt || window.event;
            if (evt.keyCode == 27) {
                hide('popDiv');
            }
        };
    </script>
</HEAD>
<BODY>
    <div id="popDiv" class="ontop">
        <table border="1" id="popup">
            <tr>
                <td>
                    This is can be used as a popup window
                    <br></br>
                    Click Close OR escape button to close it
                    <a href="#" onClick="hide('popDiv')">Close</a>
                </td>
            </tr>
        </table>
    </div>
    <CENTER>
        <h3>
            Simple popup div with disabled background
        </h3>
        <br/>
        <a href="#" onClick="pop('popDiv')">Click here to open a popup div</a>
    </CENTER>
</BODY>

出于某种原因，我不确定，我无法让这段代码在 jsfiddle 中工作，但我在一个 html 文件中使用了相同的代码，并带有 css 和它工作正常。

请帮忙。

Answer 1

它有效，但前提是 Javascript 在源代码中出现在您的 onclick-handlers 之前。

所以你需要在 JSFiddle 中更改以下设置（第二个下拉列表必须设置为 "No wrap - in <head>":

在更新后的 fiddle 中，我还修复了不透明度问题。您的整个叠加层有 opacity: 0.8;，这也会影响该叠加层的所有子项。相反，您应该在 rgba 表示法中使用稍微透明的 background-color 来覆盖：

background-color: rgba(204,204,204,0.8);

https://jsfiddle.net/ppqct0dg/4/

rgba 使用十进制数，与使用 hexa-decimal 数字的 #cccccc 符号相反。

不透明弹出 window

Opaque pop up window

html

css

popupwindow