Bootstrap v5, как передать переменную внутри модального окна (без jquery)
это мой первый вопрос :-) Я пытаюсь передать переменную в модальное окно в Bootstrap v5, возможно, без использования 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», и ее значение правильное. Я хочу передать эту переменную внутри модального окна, содержимое которого должно быть таким: ваше значение равно 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 модальному окну? Идеальным решением было бы сделать это без jquery (не входит в Bootstrap v5).
Ответы 1
Вы можете использовать несколько методов, но я предполагаю, что лучше всего будет нацелить ребенка в вашей модальной функции внутри вас sendMailClicked, а затем установить внутренний 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.Modal не был элементом html, но это отредактированное решение должно помочь.
Знаете ли вы, можно ли использовать этот метод для передачи параметров URL (например, page.htm?id=1234) в модальное окно? Я не могу понять, как это лучше сделать.
Спасибо, Алекс. Но это не работает. Пишет "Uncaught TypeError: myModal.querySelector не является функцией"...