有没有办法使用链接将变量传递给模态

Question

这是我的链接和我想传递的示例数据值“data-id”

<a href="#edit_task" data-toggle="modal" data-id="WAH"><i class="fas fa-edit fa-lg fa-fw"></i></a>

用于加载模态并将数据值分配给模态的javascript代码

<script>
       $("#openModal").click(function(){
$(".modal-body").text($(this).data("id"));
$("#edit_task").modal("open");
});
       </script>

我的模态

<div class="modal fade" id="edit_task">
  <div class="modal-dialog">
    <div class="modal-content">
<form action="" method="post"  enctype="multipart/form-data">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">add new user</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

模态体我想在这里显示模态变量

 <!-- Modal body -->
      <div class="modal-body">
        

  </div>

模态页脚

 <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      <?php
  echo "<button type='submit' class='btn btn-primary' name='edit' onclick='return mess()'; >";echo "save"; echo "</button>";
       ?>
 </div>

确认何时保存值的功能

 <script type="text/javascript">
function mess(){
  alert ("the new user is successfully saved");
  return true;
}

</script>

模式结束

</form>
      </div>

    </div>
  </div>

Answer 1

我已经创建了一个working fiddle，您正在寻找的内容。

我更改了您的哇音按钮，将 href 属性替换为 data-target 属性：

<a class="btn btn-primary" data-toggle="modal" data-target="#edit_task" data-id="Wah">Wah</a>

注意：如果您希望按钮看起来像一个链接，请将我在示例中使用的 btn-primary 类替换为 btn-link

不要在按钮上使用点击事件，而是使用bootstraps show.bs.modal event。 $(event.relatedTarget) 语法是如何获取单击以打开模式的按钮的按钮对象。

$(document).ready(function(){

  $('#edit_task').on('show.bs.modal', function (event) {        
      $('#edit_task').find('.modal-body').text($(event.relatedTarget).data('id'));
  })


});