پرسش

چطور میتونم یک مودال بوت‌ استرپ رو با جاوا اسکریپت مخفی کنم؟

How to hide a Bootstrap modal with JavaScript?

سلام من با بوت‌ استرپ 5 کار می‌کنم و میخوام بدون اینکه از دکمه‌های پیش‌فرض مودال استفاده کنم، مودال رو با جاوااسکریپت مخفی کنم. چه جوری می‌تونم این کار رو انجام بدم؟

1403/05/31
پاسخ

سلام برای مخفی کردن مودال بوت‌استرپ با جاوااسکریپت، میتونی از متد hide() استفاده کنی که توی بوت‌استرپ 5 برای این کار در نظر گرفته شده. این متد به طور پیش‌فرض با استفاده از ID مودال، مودال رو مخفی میکنه. این‌جا یه مثال برات میزنم

فرض کن که مودالت این‌طوری تعریف شده

<!-- 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">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

حالا برای مخفی کردن این مودال با جاوااسکریپت، می‌تونی کد زیر رو استفاده کنی

// Get the modal element
let myModal = new bootstrap.Modal(document.getElementById('myModal')); 
myModal.hide()
پاسخ: 1403/05/31
آخرین آپدیت: 1403/07/19