javascript - Hiding a modal and showing it using CSS3 transitions - Stack Overflow

admin管理员组

文章数量:1277298

I'm trying to build a small modal plugin but I'm struggling to find a way to hide the modal and be able to fade it in/out using only CSS3 transitions.

Obviously, I can't animate display: none to inherit and using opacity and visibility isn't an option because the content is still technically there, it just can't be seen so it prevents elements beneath it from being used (buttons etc.)

So my thinking was to use jQuery to switch between display: hidden and inherit and then use jQuery to add a class of 'shown' which would trigger the transition. But it's not working. I'm just getting an instant show (as with the blackout element behind). The CSS transitions are working though, I've tested them without the 'display' stuff.

My jQuery so far:

// Modal open trigger
$('.modal-trigger').click(function() {
    modal = $('#' + $(this).data('modal-trigger'));
    modal.css({'display':'inherit'}).addClass('modal-show');
    $('#blackout').css({'display':'inherit'}).addClass('show');
});

Any ideas?

I'm trying to build a small modal plugin but I'm struggling to find a way to hide the modal and be able to fade it in/out using only CSS3 transitions.

Obviously, I can't animate display: none to inherit and using opacity and visibility isn't an option because the content is still technically there, it just can't be seen so it prevents elements beneath it from being used (buttons etc.)

So my thinking was to use jQuery to switch between display: hidden and inherit and then use jQuery to add a class of 'shown' which would trigger the transition. But it's not working. I'm just getting an instant show (as with the blackout element behind). The CSS transitions are working though, I've tested them without the 'display' stuff.

My jQuery so far:

// Modal open trigger
$('.modal-trigger').click(function() {
    modal = $('#' + $(this).data('modal-trigger'));
    modal.css({'display':'inherit'}).addClass('modal-show');
    $('#blackout').css({'display':'inherit'}).addClass('show');
});

Any ideas?

• javascript
• jquery
• css
• modal-dialog
• fade

Share Improve this question Follow asked Feb 7, 2014 at 16:56 twistedpixeltwistedpixel 1,22555 gold badges1414 silver badges3434 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

CSS transitions don't take effect if the element is hidden (display: none) when the transition is applied. Also, it doesn't matter what order the CSS changes are made in your JavaScript function, the browser will pute them all at once.

A quick solution is to force the browser to process the display change first, then the transition.

Try this:

modal.css({'display':'inherit'});
setTimeout(function(){ modal.addClass('modal-show'); }, 0);

Another way is to avoid using display: none at all. Use:

.hide
{
    opacity: 0;
    pointer-events: none;
}

.show
{
    opacity: 1;
    pointer-events: auto;
}

pointer-events allows the element to be invisible, but not interfere by swallowing mouse events. You should probably avoid using this except for small aesthetic things though, since the element might still interfere with e.g. form tab ordering. Also, IE support for the property is only from IE 11, if you care about that.

You can transition the 'visibility' property instead of the display property

see here: http://tympanus/codrops/2013/06/25/nifty-modal-window-effects/

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
}

.md-show {
    visibility: visible;
}

.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(143,27,15,0.8);
    transition: all 0.3s;
}

.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

The best solution off the top of my head is using jQuery's built in animations

modal.fadeOut();

Using vanilla css will not be easy. Check out this question: Transitions on the display: property.

My apologies in advance if I am being too simplistic, but have you tried to just use a fadeToggle()?

This is the stack that I use for showing and hiding modals:

function modalShow(){
    $(".modal-window").fadeToggle(200);
    return false;
}

function modalHide(){
    $(".modal-window").toggle();
    return false;
}

$(document).ready(function() {
    $("#close-modal").click(modalHide);
});

Hope it helps. Cheers.

本文标签： javascriptHiding a modal and showing it using CSS3 transitionsStack Overflow