پیشنهاد شگفت‌انگیز سبزلرن: 50% تخفیف خرید دوره PHP
مشاهده دوره
ثانیه
دقیقه
ساعت
روز
پرسش

بستن مودال در بوت استرپ با جاوا اسکریپت خام

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 رو از بین میبریم تا پس‌ زمینه سیاه مودال ناپدید بشه.

 

پاسخ: 1403/06/04
آخرین آپدیت: 1403/08/05