bootstrap 模态框modal 传值问题

最新推荐文章于 2025-06-22 10:34:51 发布

Zhac

最新推荐文章于 2025-06-22 10:34:51 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb

本文链接：https://blog.youkuaiyun.com/zhaihao1996/article/details/97277690

JavaWeb 专栏收录该内容

38 篇文章

订阅专栏

在后台管理系统中，Bootstrap的模态框Modal被广泛用于编辑操作。本文介绍如何将页面上的值传递到模态框内显示。通过HTML触发模态框的按钮，结合JavaScript的event.relatedTarget属性和data-*属性，可以方便地获取并设置模态框中的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台管理的项目常会使用到bootstrap里面的模态框modal，因此编辑的时候就需要将页面上的值传到模态框里面并显示，如：

html代码：触发模态框

<a href="#updateDeptMd" data-toggle="modal" class="btn btn-success btn-xs" data-orderId="需要传递的值">修改</a>

模态框

<!--修改部门的模态框-->
<div class="modal" id="updateDeptMd">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">修改部门信息</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="updateDeptFom">
                    <div class="form-group">
                        <label for="updateId" class="control-label col-md-2">Id</label>
                        <div class="col-md-10">
                            <input class="form-control" type="text" id="updateDeptId" name="id" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="updateName" class="control-label col-md-2">部门名称</label>
                        <div class="col-md-10">
                            <input class="form-control" type="text" id="updateDeptName" name="name" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="updateDeptBtn">修改</button>
            </div>
        </div>
    </div>
</div>

js代码如下：

 /*初始化修改部门列表*/
    function updateDpet() {
        // 初始化部门修改信息下拉列表
        $('#updateDeptMd').on('show.bs.modal',function (e) {
            var id = $(e.relatedTarget).data('orderid'); //根据上面a标签中传递的data-orderid取值,这里也可以通过data-id取值
            //var data =  $('#updateDeptMd').data(); 也可以直接取data对象再取值
            console.log(id);
            // 到后台获取部门信息
            $.ajax({
                url:'/dept/queryId',
                type:'POST',
                data:{id:id},
                dataType:'json',
                success:function (data) {
                    console.log(data);
                    /*查询empId*/
                    $('#updateDeptId').val(data.id);
                    $("#updateDeptName").val(data.name);
                },
                error:function () {
                    // alert('出错了');
                }
            });
        });

主要是通过event.relatedTarget获取触发事件的按钮,然后通过设置的data-orderId或者data-id等获取值。