Bootstrap v5，如何在模式中传递变量（没有 jquery）

Question

这是我的第一个问题:-) 我正在尝试将变量传递给 Bootstrap v5 中的模态 window，可能不使用 jquery（v5 不再使用它）。

我有一个按钮：

<button class="btn btn-primary" id="sendMailButton">Send an Email</button>

此按钮触发函数“sendMailClicked”

document.getElementById("sendMailButton").addEventListener("click", sendMailClicked);

这是函数

function sendMailClicked() {
   var theValue = document.getElementById('inputid').value;  
   var myModal = new bootstrap.Modal(document.getElementById('emailModal'), { backdrop: 'static' })
   myModal.show();
}

在 sendMailClicked 中定义了变量“theValue”并且它的值是正确的。我想在模态 window 中传递此变量，其内容应如下所示：您的值为 theValue

<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Do you want to send an email?</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Your value is <?= theValue ?>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary" id="yesSendMail" value="<?= theValue ?>">Ok invia</button>
                        </div>
                    </div>
                </div>
            </div>

我想 HTML 中预加载的模态 window 是 theValue 未定义的原因。有没有办法将 theValue 值传递给模态 window？理想的解决方案是不使用 jquery（不包含在 Bootstrap v5 中）。

Answer 1

你可以使用多种方法，但我猜最好的方法是在你的 sendMailClicked 函数中定位你模态中的 child，然后将内部 html 设置为随心所欲

function sendMailClicked() {
   var theValue = document.getElementById('inputid').value;  
   var modalContainer = document.getElementById('emailModal')
   var myModal = new bootstrap.Modal(modalContainer, { backdrop: 'static' })
   
   modalContainer.querySelector(".modal-body").innerHTML = "Your value is: " + theValue;
   
   myModal.show();
}

Bootstrap v5，如何在模式中传递变量（没有 jquery）

Bootstrap v5, how to pass a variable inside a modal (without jquery)

bootstrap-modal

bootstrap-5