如果元素的opacity=1不工作

Question

我有一段代码不起作用，我只是不知道为什么。以下是简化的代码：

HTML：

<div id="objInfo">
    <div id="button"></div>
    <img src="img/x.png" class="obj_x">
</div>

CSS：

#objInfo { opacity: 0; display: none }

JAVASCRIPT：

if ($('#objInfo').css('opacity') != "1")
{
    $("#button").click(function(){
        $("#objInfo").css("display", "block");
        $("#objInfo").animate({opacity: 1, top: "-25px"});
    });
}
else
{
     $(".obj_x").click(function(){
        $("#objInfo").css("display", "none");
        $("#objInfo").animate({opacity: 0, top: "+25px"});
    });

}

因此，基本上，我希望有一个弹出窗口(#objInfo)，当点击#按钮时出现，当单击.obj_x时消失。而且，当我点击它的外部时，我希望#objInfo消失。(我没有把它添加到代码中，因为没有必要添加。一旦if语句生效，这将是需要解决的最小问题。这就是我需要该语句的原因) if语句就在那里，以检查是否显示该框，当它显示时，我希望能够使用专用的obj_x按钮或单击框外的按钮将其关闭。

我希望我能给你们解释清楚。这是我的第一篇帖子所以请温柔点..。我们将非常感谢你的帮助！

Answer 1

我想要一个弹出窗口(#objInfo)，当点击#按钮时出现，单击.obj_x时消失。

以下代码应该有效：

HTML

<div id="objInfo">
  <div class="obj_x">BLABLA</div>
</div>

<button id="show">Show</button>

CSS

#objInfo { display: none }

JS

function hideBlock(){

    $("#objInfo").css('display','none')
    $("#show").css('display','inline-block')

    $(document).mousedown(function(){ return false;})
}

function displayBlock(){

    $("#objInfo").css('display','block')
    $("#show").css('display','none')

    $(document).mousedown( hideBlock )
}


$("#show").click( displayBlock )
$(".obj_x").click( hideBlock )

http://jsfiddle.net/rpdmwqo8/1/

Answer 2

希望这就是你要找的

HTML

<button type="submit" id="btn">PopUp</button>
<div class="overlay"></div>
<div class="popUp">
    <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
    <span class="popUp-close" title="Close"></span>
</div>

CSS

.overlay {
    background: rgba(0, 0, 0, 0.5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 6;
}
.popUp {
    background: #e9f1f4;
    border: 1px solid #e1e2e4;
    display: none;
    left: 50%;
    width: 550px;
    padding: 30px;
    position: fixed;
    top: 50%;
    z-index: 7;
}
.popUp-close {
    cursor: pointer;
    position: absolute;
    top: -13px;
    right: -13px;
    height: 26px;
    width: 26px;
    /*background: url("../images/close-btn.png") no-repeat;*/
    background: #ccc;
}

JavaScript

//PopUp Script Starts
function pop(action) {

    if (action === 'reset') {
        // Reset popup code.
        var $width = $('.popUp').outerWidth(),
            $height = $('.popUp').outerHeight();

        $('.popUp').css({
            'margin-top': -$height / 2,
            'margin-left': -$width / 2
        });
    }
    if (action === 'show') {
        // Open popup code.
        //$('.wrapper').append('<div class="overlay white"></div><div class="popUp"><div></div><span class="popup-close"></span></div>');
        pop('reset');
        $('.overlay, .popUp').fadeIn(500);
    }

    if (action === 'hide') {
        // Close popup code.
        $('.overlay, .popUp').fadeOut(500, function() {
            $(this).hide();
        });
    }
};

var keyDown; // on escape
window.onkeydown = function() {
    keyDown = true;
};

window.onkeyup = function(e) {
    if (e.keyCode === 27 && keyDown) {
        pop('hide');
        keyDown = false;
    }
};

$(document).on('click', '.popUp-close, .overlay', function() {
    pop('hide');
});
$(document).on('click', '#btn', function() {
    pop('show');
});
//PopUp Script Ends
</script>

http://jsfiddle.net/bogd4px8/