用对话框存储网站数据的最佳方式

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>