卡片翻轉內Bootstrap模態與動態導入圖像

Question

我正在做一種紙牌遊戲。我使用Bootstrap 3作爲我的框架，在網格中有一副牌，每張牌都在自己的列中。

單擊卡片時，我希望將卡片背面顯示爲疊加層，如Bootstraps模式或同等效果。但是當卡片被點擊（或觸摸）時，它應該翻轉，顯示與點擊的圖像相同的正面以觸發模式。它應該能夠無限次翻轉和前進。點擊模式外或關閉按鈕，關閉模式並返回到甲板。

我可以在圖像上做卡片翻轉。而且我能夠觸發帶有動態內容的模式。但我無法弄清楚的是如何一起做到這一點，這樣我就不必爲每張卡創建一個單獨的模式。

我一直在這個問題上拉我的頭髮好幾天了，我真的無法把我的頭圍繞如何做到這一點。我的JavaScript技能是相當有限的，我無法找到任何插件或代碼示例來幫助我在這（我試過很多選項）。

我的網格顯示在片段中。沒有數據目標，模塊或JavaScript包括，因爲我還沒有找到任何工作。

任何想法？

main { 
 
    .container-fluid; 
 
    .text-center; 
 
    background: none; 
 
    header { 
 
    .container-fluid; 
 
    .text-center; 
 
    padding: 50px; 
 
    h1 { 
 
     font-weight: @font-weight-heading; 
 
    } 
 
    } 
 
    .cardColumns { 
 
    .make-row(); 
 
    .cCard { 
 
     .make-xs-column(4); 
 
     .make-sm-column(3); 
 
     .make-md-column(2); 
 
     padding: 10px; 
 
     img { 
 
     width: 100%; 
 
     height: auto; 
 
     .img-rounded; 
 
     modal-body-shadow: 0 4px 8px 0 #000; 
 
     transition: 0.3s; 
 
     } 
 
     img:hover { 
 
     modal-body-shadow: 0 8px 16px 0 #000; 
 
     } 
 
    } 
 
    } 
 
}

<main> 
 
    <div class="cardColumns"> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</main>

Answer 1

這基本上只是改變中期旋轉背景圖像。

$(document).ready(function() { 
 
    initListeners(); 
 
}); 
 

 
function initListeners() { 
 
    $(".container").off(); 
 
    $(".container").on("click",function() { 
 
    $(".container").removeClass("toggle") 
 
    $(this).addClass("toggle"); 
 
    }); 
 
} 
 

 
/*var Cards; 
 
setTimeout(function() { 
 
    Cards = document.querySelectorAll(".container"); 
 
    for (let i = 0; i < (e = Cards.length); i++) 
 
    Cards[i].addEventListener("click", function(elem) { 
 
     for (let i = 0; i < (e = Cards.length); i++) 
 
     Cards[i].classList.remove('toggle'); 
 
     elem.target.parentElement.classList.add('toggle'); 
 
    }); 
 
}, 1);*/

.container { 
 
    perspective: 1000px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.card { 
 
    margin: 5px; 
 
    width: 105px; 
 
    height: 150px; 
 
    background: #000; 
 
    transition: transform .35s linear; 
 
    transform: rotateX(180deg); 
 
    transform-style: preserve-3d; 
 
} 
 

 
.card::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(https://i.stack.imgur.com/gcRWf.png) center center; 
 
    background-size: cover!important; 
 
    transition: background 0.01s linear; 
 
    transition-delay: 0.175s; 
 
} 
 

 
.container.toggle .card { 
 
    transform: rotateX(0deg); 
 
} 
 

 
.container.toggle .card::after { 
 
    background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div>

在單個文件

Answer 2

複製害蟲代碼併爲您在當地它將運行。完善。下面給出的是現代的做法。您可以參考this link以獲取動態創建模態方式的更多詳細信息。

與此同時我也使用外部js翻轉圖像參考您將得到here。

$('.flip-card').flip(); 
 

 

 
function openModal(front_image, back_image) { 
 
    var message = $('#modal_1'); 
 
    BootstrapDialog.show({ 
 
    message: $('#modal_1'), 
 
    onshown: function() { 
 
     $('.front img').attr('src', front_image); 
 
     $('.back img').attr('src', back_image); 
 
    }, 
 
    onhide: function(dialogRef) { 
 
     $('#hidden-div').append(message); 
 
    }, 
 
    }); 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> 
 

 
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button> 
 

 

 
<div id="hidden-div" style="display: none"> 
 
    <div class="container-fluid" id="modal_1"> 
 
    <div class="row"> 
 
     <div class="col-sm-3 col-xs-6"> 
 
     <div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;"> 
 
      <div class="front front-side" style=""> 
 
      <img src="" alt="" style="width : 100%; height: 100%"> 
 
      </div> 
 
      <div class="back back-side" style="background-color : blue"> 
 
      <img src="" alt="" style="width : 100%; height: 100%"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>