讓div彈出一個模式

我目前有一個由多行組成的佈局，每個列有4列。每列包含顯示一些基本信息的「卡片」。讓div彈出一個模式

當用戶點擊其中一張卡片時，我希望它可以製作翻轉效果以顯示其背面，其中包含更詳細的信息，以及將div設置爲高於其他所有內容的居中，我可以顯示更多文本，並且不會破壞佈局（作爲Bootstrap模式將顯示）。

翻轉效果正在工作，但我現在正在努力使div類轉換成模態，MK.a居中和放大，沒有縮放文本，所以我可以在那裏適應更多的信息。

這裏是我的HTML代碼：

<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>

任何幫助，不勝感激！

來源

2016-09-24 Lucio

也許你想檢查bootstrap，有模態。否則，你需要一個看起來像模態的CSS，而jQuery只需添加或移除一個類。

來源

2016-09-24 22:31:39

我會推薦一些示例代碼添加到您的答案 – YakovL

已經檢查引導，走進materializecss方向相反，它有模態也。但是我想要的是將div轉換爲模態。我想過渡到其他元素的頂部，垂直和水平居中 – Lucio

讓div彈出一個模式

回答

相關問題