Question

我正在学习所有的webdev，现在用于游戏社区目的我正在制作一个类似于周期表的网站。它现在约有25个“元素”，但只显示没有任何信息的块。
我想让它打开一个对话框（找不到任何其他名称），类似于包含项目信息的wowhead表，但我不打开它点击，而不是悬停，并希望它像灯箱一样，在屏幕中间打开，背景变灰。
元素数量将上升到大约80，这是我的问题：
我应该为每个这样的元素html文件制作，它将在对话框中显示，或者使用数据库吗？

Answer 1

我认为Bootstrap可能是布局和模态（弹出框）的最简单解决方案。

你真的只需要一个模态。

您可以为每个“块”提供data attribute并在其中存储item id。
然后，当用户点击一个块时，从属性
使用id从您的数据库中获取该项目的信息（无数种方法）
然后将该信息填充到模态中。

这是一个人为的例子（没有从数据库部分获取信息，这可能会因你想要的方式而有很大差异。）

$('.container').on('click', '.block',function(){
    var id=$(this).data('id');
    $('#blockId').html(id);
	$('#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>
                	<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>

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

1 个答案: