Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using CSS3 transition flip effects to show a modal dialog?

Using CSS3 transition flip effects to show a modal dialog?

Problem

I'd like to show a Modal dialog using a 3D flip effect, exactly like the "3D flip (horizontal)" example in the Effeckt.css library.

However I really don't need the whole Effeckt library, since I just want this one effect. So I've tried to strip out the relevant bits of the library into free-standing CSS and JavaScript.

This is my attempt, but it's not working: http://jsfiddle.net/eJsZx/

As the JSFiddle demonstrates, it's only showing the overlap - not the modal itself. This is odd, because the element inspector suggests that the modal should be visible - it has display: block, visibility: visible and zindex: 2000 (higher than the overlay element).

This is the JavaScript:

$('button').on('click', function() { 
  $("#effeckt-modal-wrap").show();
  $("#effeckt-modal-wrap").addClass('md-effect-8');
  $("#effeckt-modal-wrap").addClass("effeckt-show");
  $('#effeckt-overlay').addClass("effeckt-show");

  $(".effeckt-modal-close, .effeckt-overlay").on("click", function() {
    $("#effeckt-modal-wrap").fadeOut();
    $('#effeckt-modal-wrap').removeClass("effeckt-show");
    $("#effeckt-modal-wrap").removeClass('md-effect-8');
    $('#effeckt-overlay').removeClass("effeckt-show");
  });   
});  

What am I doing wrong?

Problem courtesy of: Richard

Solution

There were a couple of issues in the code.

First, your styles were missing the following:

.effeckt-show .effeckt-modal {
    visibility: visible;
}

This was causing the modal to remain invisible.

Once the dialog was visible, the dialog would rotate in just fine, however when being dismissed it would not rotate out. This was due to the following line:

 $("#effeckt-modal-wrap").removeClass('md-effect-8');

If you want to remove this class, it would need to be done after the animation is complete otherwise the 3d effect is lost. It doesn't necessarily need to be removed, but that depends on what the rest of your content needs.

The final issue was that the wrapper, on completion of the fadeout, was getting its local style set to display: none. Because of this, the second time showing the dialog would cause it to simply appear because it was moving from display: none to display: block. There are a couple of options here.

  1. Use CSS to animate the fade in/out.
  2. Use window.setTimeout after calling $.show on the element to give the dom a chance to update.

The final result: Working Fiddle

Solution courtesy of: dc5

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Using CSS3 transition flip effects to show a modal dialog?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×