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

}

所以基本上，我想要点击#button时出现一个弹出窗口（#objInfo），点击.obj_x时会消失。而且，当我点击它之外时，我希望#objInfo消失。（我没有在代码中添加它，因为没有必要。一旦if语句起作用，这将是最不容易解决的问题。这就是我需要该语句的原因） if语句用于检查是否显示该框，当它出现时，我希望能够使用专用的obj_x按钮或框外的单击将其切换回来。

我希望我能为你们解释得很好。这是我的第一篇文章，所以请温柔......;）非常感谢帮助！

Answer 1

我想要点击#button时出现一个弹出窗口（#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/

如果元素的opacity = 1不起作用

2 个答案: