这是你如何发送id_data到一个模态:

<input
    href="#"
    data-some-id="uid0123456789"
    data-toggle="modal"
    data-target="#my_modal"
    value="SHOW MODAL"
    type="submit"
    class="btn modal-btn"/>

<div class="col-md-5">
  <div class="modal fade" id="my_modal">
   <div class="modal-body modal-content">
     <h2 name="hiddenValue" id="hiddenValue" />
   </div>
   <div class="modal-footer" />
</div>

和javascript:

    $(function () {
     $(".modal-btn").click(function (){
       var data_var = $(this).data('some-id');
       $(".modal-body h2").text(data_var);
     })
    });

我是bootstrap 5，由于我控制之外的约束，我不能显示()脚本的模态，所以我依赖于弹出模态的按钮的属性data-b -toggle和data-b -target。

Bootstrap暴露了一些事件(https://getbootstrap.com/docs/5.0/components/modal/)，我们可以像这样钩住代码:

document.getElementById('idModal').addEventListener('show.bs.modal', (e) => {
    console.log(e.relatedTarget);
});

在relatedTarget中，我们将在dataset中找到指定的数据属性，例如，如果我们有一个看起来像这样的元素:

<button
    class="btn btn-secondary"
    data-id="fk_articles"
    data-bs-toggle="modal"
    data-bs-target="#documentationModal">
        Documentation
</button>

然后我们可以通过以下方式到达fk_articles:

console.log( e.relatedTarget.dataset.id )

如果你是在引导3+，这可以缩短一点，如果使用Jquery。

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="my_id_value">Open Modal</a>

<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <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="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">
            Modal Body
            <input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

JQUERY

<script type="text/javascript">
    $(function () {
        $(".identifyingClass").click(function () {
            var my_id_value = $(this).data('id');
            $(".modal-body #hiddenValue").val(my_id_value);
        })
    });
</script>

您可以尝试simpleBootstrapDialog。在这里你可以传递标题，消息，回调选项取消和提交等…

使用此插件包括simpleBootstrapDialog.js文件如下所示

<script type="text/javascript" src="/simpleDialog.js"></script>

基本用法

<script type="text/javascript>
$.simpleDialog();
</script>

自定义标题和描述

$.simpleDialog({
  title:"Alert Dialog",
  message:"Alert Message"
});

与回调

<script type="text/javascript>
$.simpleDialog({
    onSuccess:function(){
        alert("You confirmed");
    },
    onCancel:function(){
        alert("You cancelled");
    }
});
</script>

我发现这个方法很有用:

创建点击事件:

$( button ).on('click', function(e) {
    let id = e.node.data.id;

    $('#myModal').modal('show', {id: id});
});

创建show.bs.modal事件:

$('#myModal').on('show.bs.modal', function (e) {

     // access parsed information through relatedTarget
     console.log(e.relatedTarget.id);

});

额外的:

让你的逻辑在show.bs.modal中检查属性是否被解析，就像这样: id:(e.r relatedtarget。hasOwnProperty('id') ?e.relatedTarget.id: null)

试试这个

$(function(){
 //when click a button
  $("#miButton").click(function(){
    $(".dynamic-field").remove();
    //pass the data in the modal body adding html elements
    $('#myModal .modal-body').html('<input type="hidden" name="name" value="your value" class="dynamic-field">') ;
    //open the modal
    $('#myModal').modal('show') 
  })
})