用對話框存儲網站數據的最佳方式

Question

我正在學習所有的webdev，現在用於遊戲社區目的我正在製作一個類似於週期表的網站。它現在支持大約25個「元素」，但只顯示沒有任何信息的塊。
我想讓它打開一個對話框（找不到任何其他名稱），類似於包含項目信息的wowhead表，但我不想在點擊時打開它，而不是在懸停上，並且希望它行動像lightbox一樣，在背景變灰的屏幕中間打開。
元素數量將增加到大約80，這裏是我的問題：
我應該爲每個這樣的元素html文件，它將在對話框中顯示，或使用它的數據庫嗎？

Answer 1

我認爲Bootstrap可能是佈局和Modal（彈出框）最簡單的解決方案。

你真的只需要一個模態。

1. 你可以給每個「塊」一個data attribute和存儲的item id那裏。
2. 然後，當用戶點擊一個塊，從屬性
3. 獲得ID使用id從數據庫獲得該項目的信息（的方式無數這樣做）
4. 然後填充這些信息進入模態。

這裏是一個人爲的例子（沒有從數據庫中部分得到信息這可能取決於你想要怎麼做，差別很大。）

$('.container').on('click', '.block',function(){ 
 
    var id=$(this).data('id'); 
 
    $('#blockId').html(id); 
 
\t $('#myModal').modal({show:true}); 
 
    
 
    
 
});

/* CSS used here will be applied after bootstrap.css */ 
 
.block{ 
 
    background-color:#ccc; 
 
    height:100px; 
 
    width:100px; 
 
    cursor:pointer; 
 
    
 
} 
 
#blockId{ 
 
    font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-2"><div class="block" data-id="123"></div></div> 
 
    <div class="col-xs-2"><div class="block" data-id="456"></div></div> 
 
    <div class="col-xs-2"><div class="block" data-id="789"></div></div> 
 
    <div class="col-xs-2"><div class="block" data-id="234"></div></div> 
 
    <div class="col-xs-2"><div class="block" data-id="567"></div></div> 
 
    <div class="col-xs-2"><div class="block" data-id="678"></div></div> 
 
    </div> 
 
    
 
    
 
</div> 
 
<div id="myModal" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">×</button> 
 
       \t <h3>Modal header</h3> 
 

 
      </div> 
 
      <div class="modal-body"> 
 
       <p>The id of the block you clicked was <span id="blockId"></span> use that to get stuff from your database</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button class="btn" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>