Using CSS3 transition flip effects to show a modal dialog? -

i'd show modal dialog using 3d flip effect, "3d flip (horizontal)" example in the effeckt.css library.

however don't need whole effeckt library, since want 1 effect. i've tried strip out relevant bits of library free-standing css , javascript.

this attempt, it's not working: http://jsfiddle.net/ejszx/

as jsfiddle demonstrates, it's showing overlap - not modal itself. odd, because element inspector suggests modal should visible - has display: block, visibility: visible , zindex: 2000 (higher overlay element).

this 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 doing wrong?

there couple of issues in code.

first, styles missing following:

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

this causing modal remain invisible.

once dialog visible, dialog rotate in fine, when being dismissed not rotate out. due following line:

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

if want remove class, need done after animation complete otherwise 3d effect lost. doesn't need removed, depends on rest of content needs.

the final issue wrapper, on completion of fadeout, getting local style set display: none. because of this, second time showing dialog cause appear because moving display: none display: block. there couple of options here.

1. use css animate fade in/out.
2. use window.settimeout after calling $.show on element give dom chance update.

the final result: working fiddle