CSS:全窗口弹出框

时间:2015-08-19 10:26:21

标签: html css

目前我正在使用wordpress主题。我不了解PHP,因此无法编辑文件,也无法使用它添加引导程序。但是我的页面需要一个弹出框,所以我使用了CSS。但问题是在父窗口中弹出弹出窗口,我希望它全屏显示。我该怎么做?在此处查看屏幕截图和代码:http://justpaste.it/n4ol

2 个答案:

答案 0 :(得分:0)

尝试这样的事情:

.popup{
   position:fixed;
   top:0;
   right:0;
   left:0;
   bottom:0;
}

答案 1 :(得分:0)

你可以使用新的弹出窗口吗?

这是

        <html>
<head>
    <title>LIGHTBOX EXAMPLE</title>
    <style>
    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
    .white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 16px solid orange;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }
</style>
</head>
<body>
    <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
    <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>
</body>

试试这个

在页脚中使用此弹出窗口。你会找到帮助。