پرسش
چطور میتونم یک مودال بوت استرپ رو با جاوا اسکریپت مخفی کنم؟
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