Question

我从谷歌找到了这个代码，它工作正常，但弹出窗口是透明的，我想让它变得不透明。（我知道弹出窗口是透明的，因为如果我放大浏览器，我会看到弹出窗口与背景内容重叠，背景内容可见）

以下是代码链接：

<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中使这个代码工作，但我在一个带有css标签的html文件中使用了相同的代码，它工作正常。

请帮助。

Answer 1

它有效，但前提是Javascript出现在源代码中的onclick处理程序之前。

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

enter image description here

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

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

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

rgba使用十进制数，与使用十六进制数的#cccccc表示法形成对比。

不透明的弹出窗口

1 个答案: