bootstrap-modal - Bootstrap v5，如何在模式中传递变量(没有 jquery)

Question

这是我的第一个问题:-)我试图在不使用 jquery 的情况下将变量传递到 Bootstrap v5 中的模态窗口(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”并且它的值是正确的。我想将这个变量传递到一个模态窗口中，它的内容应该是这样的:你的值是 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 中预加载的模态窗口是 theValue 未定义的原因。有没有办法将 theValue 值传递给模态窗口？理想的解决方案是不使用 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();
}