1

Effeckt.css ライブラリの「3D フリップ (水平)」の例とまったく同じように、3D フリップ効果を使用してモーダル ダイアログを表示したいと思います。

ただし、この 1 つのエフェクトだけが必要なので、Effeckt ライブラリ全体は必要ありません。そこで、ライブラリの関連部分を独立した 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");
  });   
});

私は何を間違っていますか？

4

1 に答える 1