bootstrap中关于模态框的问题（求大佬给几个方案）

在这里插入图片描述我的问题是这样的：因为信息内容过长，所有选择点击出现模态框显示

第一想法：模态框先在页面建好，然后点击之后出现对应标题及内容，如图但是由于水平原因没有实现。
第二想法：模态框也在js中用模板语法渲染，然后用$(item.id)来填充数据，此想法实现了，遇到了一个问题 模态框点击按钮

<button type="button" class="btn" data-toggle="modal" data-target="#showMsg">
 ${contentAbbreviation}
</button>

模态框代码

 <div class="modal fade" id="showMsg" tabindex="-1" role="dialog" aria-labelledby="showDetailTitle">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" >${item.title}</h4>
                    </div>
                    <div class="modal-body">
                       ${item.content}
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                  </div>
                </div>
              </div>

问题如下：所有的模态框都是显示查询的第一条记录？？？解决方法：每句代码修改测试，发现需要把模态框点击按钮的data-target及模态框代码的id同时修改为后台获取的任一数据即可，我用的是item.id。但是我觉得这种方法每获取一条数据都会在dom上渲染模板语法，浪费性能，求哥哥们给个意见，谢谢！

来源：oschina

链接：https://my.oschina.net/u/4143235/blog/3189536

标签

按钮