如果元素的不透明度=1 不起作用

if element has opacity=1 not working

本文关键字：不起作用 不透明度 元素 如果      更新时间：2023-09-26

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

.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），它在单击 #button 时出现，在单击.obj_x时消失。而且，我希望 #objInfo 在它外面单击时消失。（我没有将其添加到代码中，因为没有必要。一旦 if 语句起作用，这将是要解决的最少问题。这就是为什么我需要这个声明）if 语句只是为了检查该框是否显示，当它显示时，我希望能够使用专用的obj_x按钮或框外的单击将其切换回来。

我希望我为你们解释得足够好。这是我的第一篇文章，所以请温柔一点... ;)帮助将不胜感激！

我想要一个弹出窗口 （#objInfo），它在单击 #button 时出现，单击.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/

希望这就是你要找的

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

相关文章：