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

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

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