モーダルのようにdivをポップアップさせる

Question

私は現在、それぞれ4列の複数の行からなるレイアウトを持っています。各列には、いくつかの基本情報を表示する「カード」が含まれています。

ユーザーがカードの1つをクリックすると、より詳細な情報を含む裏返しを表示するフリップエフェクトを作成し、他のすべての上に移動するdivをアニメーション化したいブートストラップのモーダルが表示されるので、レイアウトを破ることなく、さらに多くのテキストを表示することができます。

フリップエフェクトは機能していますが、私は現在、divのようなものをモーダルに変換することに苦心しています。すべてのヘルプは大歓迎です

<div class="row"> 
    <div class="col s12 m3 center-align flip-container"> 
     <div class="flipper"> 
      <div class="front"> 
       <div class="card-panel teal" style="position:relative;"> 
        FRONT CARD TEXT 
       </div> 
      </div> 
      <div class="back"> 
       BACK OF THE CARD WITH A LOT MORE TEXT, IMAGES AND STUFF 
      </div> 
     </div> 
    </div> 
</div> 

：

は、ここに私のHTMLコードです！

Answer 1

多分あなたはチェックブートストラップ、モーダルを持っています。そうでなければ、モーダルのように見えるCSSが必要で、jQueryではクラスの追加または削除のみが必要です。