6、bootstrap模态框（二），传值给模态框

模态框（一）有个问题，模态框及时不弹出，也会遮挡其他div，导致其他div虽然能看见，但是无法点击，而且点击按钮触发该模态框时，没有给它传递参数。于是学习了一下官方给出的例子，做了个更完善的版本。

<button data-toggle="modal" data-target="#deleteModal" th:value="${testsuiteStat.count}"
th:id="'delete'+${testsuiteStat.count}">删除</button>

（1）data-target="#deleteModal" 和id="deleteModal"对应，有了这个点击按钮就会显示deleteModal
（2）官方的例子获取点击的button方法是：var button = $(event.relatedTarget)，我试了，获取不到。我的例子在一个循环里，通过for循环和button的click方法获取到了deleteButton
（3）show.bs.modal表示 show 方法调用之后立即触发该事件，这里可以理解成写了data-target="#deleteModal"，点击button后就会调用show方法了。在此过程中，给模态框中的变量赋值。

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <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" id="editModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                确定要删除吗？
                <input type="hidden" id="testsuiteidHidden">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" th:onclick="'javascript:deleteOne()'">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

$(function () {
    // 监听删除按钮的click动作
    for(i=0; i<[[${session.TESTSUITELISTBYPROJECTID.size()}]]; i++) {
        var j = i+1;
        $('#delete'+j).on('click', function(e) {
            // 获取delete按钮
            var deleteButton = $(this);
            $('#deleteModal').on('show.bs.modal', function (event) {
                // 获取button的value，即count序号，通过确定是第几个deletebutton调用的
                var id = $(deleteButton).val();
                var testsuiteid = $('#testsuiteid'+id).val();
                $('#testsuiteidHidden').val(testsuiteid);
            });
        });
    }
});