CODEWITHSUNDEEP
javascripthtmlcsspopupfadeout
Bryce Hahn
Bryce Hahn

Reputation: 1773

javascript and css popup fade out annimation

I am making a popup message that when it is set to style.display = "block"; (by pressing a button), it will fade to invisible. I have a button on the popup that hides the popup by setting the style.display = "none"; how can I make it fade out?

here is the css

#note {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden; 
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}
@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}
.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}
.cssanimations.csstransforms #close {
    display: none;
}

here is the javascript

<script>
    close = document.getElementById("close");
    close.addEventListener('click', function() {
        note = document.getElementById("note");
        note.style.display = 'none';
    }, false);
</script>

and here is the html

<div id="note" style="display: none;">
    Form has been sent. If you would like to fill out another suggestion, feel free but remember that there is an Anti-spam system running. <a id="close">[close]</a>
</div>

Upvotes: 0

Views: 2876

Answers (2)

Michael Zelensky
Michael Zelensky

Reputation: 2132

CSS display property doesn't have a 'hidden' value (you probably made a mistype). You should set it to 'none'. Then you should specify transition for display property for #note in css, e.g.

#note {
    display: block;
    -webkit-transition: display 2s; /* For Safari 3.1 to 6.0 and don't forget other browsers */
    transition: display 2s;
}

then, in JS all have to do is just set display property to 'none':

document.getElementById("close").onclick(function () {
    document.getElementById('note').style.display = 'none';
});

If you use CSS transitions, you should check browser compatibility list. As possible workaround, you can try CSS visibility property ('visible' to 'hidden').

But this is wrong path, because display and hidden will not give you a smooth vanishing. Try opacity property and then hide the popup by setting display to none, when transition finished.

You can use jQuery or pure JS, but it is much slower than CSS transitions. I would strictly recommmend using CSS. On the other hand, CSS transitions have worse browser compatibility, so you should use it if it fits your browser compatibility requirements.

Upvotes: 0

demonofthemist
demonofthemist

Reputation: 4199

Use jQuery, cause it is much simpler, download is from here Click Here. Include jquery.js & write your code in <script> tags.

To show popup use,

$("#btn_id").click(function(e){
    $('#note').fadeIn();
});

To hide popup use,

$("#close").click(function(e){
    $('#note').fadeOut();
});

Upvotes: 3

Related Questions