Javascript 如果元素的不透明度为1，则不工作

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

HTML:

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按钮或在框外单击将其切换回关闭状态

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

我想有一个弹出窗口（#objInfo），当点击#按钮时出现，当点击.obj_x时消失

以下代码应该可以工作：

HTML

JS

---

希望这就是你想要的

HTML

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>

//弹出脚本启动
函数pop（动作）{
如果（操作=='reset'）{
//重置弹出代码。
var$width=$（'.popUp'）.outerWidth（），
$height=$（'.popUp'）.outerHeight（）；
$（'.popUp'）.css({
“页边距顶部”：-$height/2，
“左边距”：-$width/2
});
}
如果（操作=='show'）{
//打开弹出代码。
//$（'.wrapper'）.append（''）；
弹出（“重置”）；
$（'.overlay，.popUp'）.fadeIn（500）；
}
如果（操作=='hide'）{
//关闭弹出代码。
$（'.overlay，.popUp'）.fadeOut（500，function（）{
$（this.hide（）；
});
}
};
var keyDown；//逃跑
window.onkeydown=函数（）{
keyDown=true；
};
window.onkeyup=函数（e）{
如果（e.keyCode===27&&keyDown）{
弹出（“隐藏”）；
keyDown=false；
}
};
$（文档）.on（'单击'，'）。弹出关闭、.overlay'，函数（）{
弹出（“隐藏”）；
});
$（文档）。在（'单击'，'btn'，函数（）上{
流行音乐（“秀”）；
});
//弹出脚本结束

---

你想要这样的东西吗？？？非常感谢你的回答！我没想过把它放在函数里。谢谢你！谢谢你，伙计！虽然有点复杂，但仍然有效；）谢谢你抽出时间。

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"});
    });

}

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

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

#objInfo { display: none }

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 )

<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>

.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;
}

//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>