بستن مودال در بوت استرپ با جاوا اسکریپت خام
Bootstrap 5: Close Modal with Vanilla JavaScript
سلام میخوام بدونم چطور میشه با استفاده از جاوا اسکریپت خام (vanilla javaScript) یک مودال رو ببندم. توی داک بوت استرپ، روش های مختلفی برای باز کردن مودال بوذ، اما هیچ اشاره ای به بستن مودال با جاوا اسکریپت نشده.
سلام برای بستن مودال تو بوت استرپ با جی اس میتونی از متد hide
بوت استرپ استفاده کنی. این متد برای مخفی کردن یا بستن مودال ها طراحی شده اول از همه، باید به مطمئن بشی که بوت استرپ و جاوا اسکریپت رو درست توپروژت ایمپورت کردی. بعد از اون میتونی با کد زیر مودال رو ببندی
<!-- HTML for modal -->
<div class="modal fade" id="myModal" 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">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Modal body content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Launch demo modal
</button>
// JavaScript to close modal
document.getElementById('myModal').classList.remove('show');
document.querySelector('#myModal').style.display = 'none';
document.querySelector('#myModal').setAttribute('aria-hidden', 'true');
document.body.classList.remove('modal-open');
document.querySelector('.modal-backdrop').remove();
با document.getElementById('myModal').classList.remove('show')
کلاسی که مودال رو نمایش میده رو حذف میکنیم. با تغییر display
به none
، مودال رو پنهان میکنیم. aria-hidden
رو به true
ست میکنیم تا از نظر دسترسی مخقی بشه. modal-open
رو از body
حذف میکنیم تا پسزمینه مودال برگرده. modal-backdrop
رو از بین میبریم تا پس زمینه سیاه مودال ناپدید بشه.