javascript - 从页面正文显示数据到模态正文

Question

我想将来自 Body 他们的 id(name + type) 的数据显示到 Model Body。我也希望页面正文中的数据作为标签，但在模型中作为输入。我想在编辑时单击编辑按钮并打开模型在卡片中有数据来编辑它。

https://codepen.io/fadynabilofficial/pen/PobJvER

<div class="container px-4 py-5 mx-auto">
    <div class="row justify-content-center">
        <div class="col-lg-12">
            <div class="card">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="row px-1">
                            <div class="form-group col-md-8"> 
                            <label class="form-control-label" id="name">Cheesecake With Flavor</label>
                             <label class="form-control-label" id="type">Chocola</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 mt-2">
                        <div class="row d-flex justify-content-between px-4">
                        </div>
                        <button class="btn-block btn-edit" type="button" data-toggle="modal" data-target="#exampleModal" id="submit"> 
                            Edit 
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"> 
            
            <div class="modal-dialog"> 
                <div class="modal-content"> 
                    <div class="modal-body">

                        <input id="name">
        
                        <br>
                        <button type="button" class="btn btn-success btn-sm" id="submit"> 
                            Submit 
                        </button> 
                    </div> 
                </div> 
            </div> 
    </div> 

标签： javascripthtmljquerycsstwitter-bootstrap