Bootstrap一个页面多个model层，Bootstrap 的模态框带参传多个值

Bootstrap一个页面多个model层

<button type="button" class="btn btn-block btn-success btn-flat"
data-toggle="modal" data-target="#add"><i class="fa fa-plus"></i></button>

<button type="button" class="btn btn-info"
style="margin-right: 3px" data-toggle="modal" data-target="#show">查看</button>

<button type="button" class="btn btn-warning"
style="margin-right: 3px" data-toggle="modal" data-target="#update">修改</button>

data-target="#show" 的 #show 是 id 值要与 div 的 id 对于 id="show"

<!-- 添加弹出层 -->
<div class="modal fade" id="add">
	<div class="modal-dialog">
		<div class="modal-content"></div>
	</div>
</div>
<!-- 查看弹出层 -->
<div class="modal fade" id="show">
	<div class="modal-dialog">
		<div class="modal-content"></div>
	</div>
</div>
<!-- 修改弹出层 -->
<div class="modal fade" id="update">
	<div class="modal-dialog">
		<div class="modal-content"></div>
	</div>
</div>

Bootstrap 的模态框带参传多个值

 一、使用 onclick 传值方式

在 Bootstrap 中 data-toggle="modal" 为 button 按钮绑定模态框

按钮中的 data-target="#show" 要与 div 中的 id="show" 一样

<button type="button"
onclick="Values(${role.id },'${role.name }','${role.description }','${role.createtime }')" 
class="btn btn-info" data-toggle="modal" data-target="#show">查看</button>

<div class="modal fade" id="show">
    <form>
        <div class="form-group">
            <label>ID</label>
            <input disabled="disabled" type="text" class="form-control" id="showId">
        </div>
        <div class="form-group">
            <label>姓名</label>
            <input disabled="disabled" type="text" class="form-control" id="showName">
        </div>
        <div class="form-group">
            <label>角色</label>
            <input disabled="disabled" type="text" class="form-control" id="showDescription">
        </div>
        <div class="form-group">
            <label>创建时间</label>
            <input disabled="disabled" type="text" class="form-control" id="showCreatetime">
        </div>
    </form>
</div>

$("#show").modal("text"); 的 $("#show") 与模态框 中 div 的 id 对应 id="show"，再根据 input 的 id 给 input 的 value 赋值

<script type="text/javascript">
    $("#show").modal("text");
    function Values(id,name,description,createtime) {
        $("#showId").val(id);
        $("#showName").val(name);
        $("#showDescription").val(description);
        $("#showCreatetime").val(createtime);
    }
</script>

二、使用自定义的 data-变量 传值方式

在 Bootstrap 中 data-toggle="modal" 为 button 按钮绑定模态框，按钮中的 data-target="#show" 要与 div 中的 id="show" 一样

<button type="button" class="btn btn-info"
data-id="${role.id }"
data-name="${role.name }"
data-description="${role.description }"
data-createtime="${role.createtime }"
data-toggle="modal" data-target="#show">查看</button>

<div class="modal fade" id="show">
    <form>
        <div class="form-group">
            <label>ID</label>
            <input disabled="disabled" type="text" class="form-control" id="showId">
        </div>
        <div class="form-group">
            <label>姓名</label>
            <input disabled="disabled" type="text" class="form-control" id="showName">
        </div>
        <div class="form-group">
            <label>角色</label>
            <input disabled="disabled" type="text" class="form-control" id="showDescription">
        </div>
        <div class="form-group">
            <label>创建时间</label>
            <input disabled="disabled" type="text" class="form-control" id="showCreatetime">
        </div>
    </form>
</div>

$('#show').on('show.bs.modal', function (event) 的 $("#show") 与模态框 中 div 的 id 对应 id="show"

<script type="text/javascript">
    $('#show').on('show.bs.modal', function (event) {
        var btnThis = $(event.relatedTarget); //触发事件的按钮
        var modal = $(this); //当前模态框
        var modalId = btnThis.data('id'); //解析出data-id的内容
        var modalName = btnThis.data('name'); //解析出data-name的内容
        var modalDescription = btnThis.data('description'); //解析出data-description的内容
        var modalCreatetime = btnThis.data('createtime'); //解析出data-createtime的内容
        // 将从"按钮"解析出来的data值赋给"模态框"的input标签中对于的value里面
        modal.find('#showId').val(modalId);
        modal.find('#showName').val(modalName);
        modal.find('#showDescription').val(modalDescription);
        modal.find('#showCreatetime').val(modalCreatetime);
    });
</script>

补充：用 onclick 方式这样只能得到后面修改的参数，前面查看的不能得到，而且 console里面会报错

<button type="button" onclick="Values(${role.id },'${role.name }','${role.description }','${role.createtime }')" class="btn btn-info" style="margin-right:3px" data-toggle="modal" data-target="#show">查看</button>

<button type="button" onclick="Values(${role.id },'${role.name }','${role.description }')" class="btn btn-warning" style="margin-right: 3px" data-toggle="modal" data-target="#update">修改</button>

<script type="text/javascript">
$("#show").modal("text");
function Values(id,name,description,createtime) {
    $("#showId").val(id);
    $("#showName").val(name);
    $("#showDescription").val(description);
    $("#showCreatetime").val(createtime);
}

$("#update").modal("text");
function Values(id,name,description) {
    $("#updateId").val(id);
    $("#updateName").val(name);
    $("#updateDescription").val(description);
}
</script>

补充：而 data-变量 两个的参数都可以得到

<button type="button" class="btn btn-info" style="margin-right: 3px" data-id="${role.id }" data-name="${role.name }" data-description="${role.description }" data-createtime="${role.createtime }" data-toggle="modal" data-target="#show">查看</button>

<button type="button" data-id="${role.id }" data-name="${role.name }" data-description="${role.description }" class="btn btn-warning" style="margin-right: 3px" data-toggle="modal" data-target="#update">修改</button>

<script type="text/javascript">
$('#show').on('show.bs.modal', function (event) {
    var btnThis = $(event.relatedTarget); //触发事件的按钮
    var modal = $(this); //当前模态框
    var modalId = btnThis.data('id'); //解析出data-id的内容
    var modalName = btnThis.data('name'); //解析出data-name的内容
    var modalDescription = btnThis.data('description'); //解析出data-description的内容
    var modalCreatetime = btnThis.data('createtime'); //解析出data-createtime的内容
    // 将从"按钮"解析出来的data值赋给"模态框"的input标签中对于的value里面
    modal.find('#showId').val(modalId);
    modal.find('#showName').val(modalName);
    modal.find('#showDescription').val(modalDescription);
    modal.find('#showCreatetime').val(modalCreatetime);
});

$('#update').on('show.bs.modal', function (event) {
    var btnThis = $(event.relatedTarget); //触发事件的按钮
    var modal = $(this); //当前模态框
    var modalId = btnThis.data('id'); //解析出data-id的内容
    var modalName = btnThis.data('name'); //解析出data-name的内容
    var modalDescription = btnThis.data('description'); //解析出data-description的内容
    // 将从"按钮"解析出来的data值赋给"模态框"的input标签对于的value里面
    modal.find('#updateId').val(modalId);
    modal.find('#updateName').val(modalName);
    modal.find('#updateDescription').val(modalDescription);
});
</script>