我想显示一个使用 3D 翻转效果的模态对话框,就像Efeckt.css 库中的“3D 翻转(水平)”示例一样。
但是我真的不需要整个 Efeckt 库,因为我只想要这个效果。因此,我尝试将库的相关部分剥离为独立的 CSS 和 JavaScript。
这是我的尝试,但它不起作用:http: //jsfiddle.net/eJsZx/
正如 JSFiddle 所展示的,它只显示重叠 - 而不是模态本身。这很奇怪,因为元素检查器建议模式应该是可见的 - 它具有display: block
,visibility: visible
和zindex: 2000
(高于覆盖元素)。
这是 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");
});
});
我究竟做错了什么?