Question

我遇到了伪弹出窗口的问题。我使用jQuery（1.7）和this tutorial在我的网站上创建弹出窗口。基本上我有两个预先格式化的div（一个半透明隐藏页面的其余部分，另一个 - 以图像作为背景 - 包含实际弹出窗口，其中已经加载了页面中的CSS）未显示和我显示我何时需要它们来显示弹出窗口，并为第二个div添加额外的填充（以便有不同的弹出窗口）。

我的问题是弹出窗口的背景没有加载，我最终只得到了半透明背景和弹出窗口的内容。但是，如果在控制台中禁用/启用CSS背景属性，则背景将首先重新出现。

这个问题最近才出现在对实际弹出功能进行任何修改之后，所以我真的不知道它可能来自哪里。它不能是尚未加载的背景图像的问题，因为它已经在页面加载时已存在。

相关的代码：

HTML：

<div id='popup_container'></div>
<div id='backgroundPopup'></div>

CSS：

#backgroundPopup{
    display:none;
    position: fixed;
    _position:absolute; /* hack for internet explorer 6*/
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    border: 1px solid #cecece;
    z-index: 1;  
}

#popup_container{
    display: none;
    position: fixed;
    _position:absolute; /* hack for internet explorer 6*/
    height: 526px;
    width: 718px;
    background: url(http://cdn.mojogroups.com/Layout/popup.png) no-repeat !important;
    z-index: 2;
    color: #000000;
}

使用Javascript：

//When initializing the page
$(document).ready(function(){

//[...]

popup = new Popup();
popup.initialize();

}

function Popup(){
var popupStatus = 0;



function togglePopup(){
    if(popupStatus == 0){
        centerPopup();
        loadPopup();
    }
    else
        disablePopup();
}

function loadPopup(){
    if(popupStatus == 0){
        $('#backgroundPopup').css({
            "opacity": "0.7"
        });
        $('#backgroundPopup').fadeIn("fast");
        $('#popup_container').fadeIn("fast");
        $('body').scrollTop(0);
        $('body').css('overflow', 'hidden');
        popupStatus = 1;
    }
}

this.disablePopup = function(){
    if(popupStatus == 1){
        $('#backgroundPopup').fadeOut("fast");
        $('#popup_container').fadeOut("fast");
        $('#popup_container').empty();
        $('body').css('overflow', 'auto');
        popupStatus = 0;
    }
}

function centerPopup(){
    var windowWidth = document.documentElement.clientWidth;  
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $('#popup_container').height();
    var popupWidth = $('#popup_container').width();


    $('#popup_container').css({
        "position": "absolute",
        "top": windowHeight/2 - popupHeight/2,
        "left": windowWidth/2 - popupWidth/2
    });

    $('#backgroundPopup').css({
        "height": windowHeight
    });
}

this.initialize = function(){
    $('#backgroundPopup').click(function(){
        popup.disablePopup();
    });

    $(document).keypress(function(e){
        if(e.keyCode==27)
            popup.disablePopup();
    });
}

this.contacts = function(){
    //Fill the popup container...
        centerPopup();
    loadPopup();
    popupDiv.fadeIn('fast');
}

它可能是什么？

提前感谢您的帮助！

编辑：可以找到网站（早期版本）here

更新：在某些时候我认为这是由于loadPopup（）函数添加的opacity属性，所以我删除了那部分代码;但是这个错误仍然存在（虽然可能不那么频繁，但很难确定，因为它首先是短暂的）。

Answer 1

我知道它不是回答查询的方法，但我不能在评论中添加图像，所以我在这里问。我刚刚解决了你的问题，我得到的是你能看到下面的屏幕截图。输出是否正确。 enter image description here

后台没有出现定制的伪弹出窗口

1 个答案: