Geek Answers Handbook

If the element has opacity = 1 does not work

I have code that doesn't work, and I just can't figure out why. Here's the simplified code:

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

}

So basically, I want to have a popup (#objInfo) that appears when the #button button is pressed and disappears when .obj_x is clicked. Also, I want #objInfo to disappear when I click on it. (I did not add this to the code because there is no need. After the if statement works, this will be the smallest problem that will be solved. And for this I need this operator) The if statement is there to check if this field is displayed or not, and when he is IS, I want him to be able to disable it using either the dedicated obj_x button or a click outside the field.

, , . , , , ...;) !

+4
2

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

0

, ,

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/

0

More articles:


All Articles