0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

چطور میشه با جاوا اسکریپت خام مدال‌ های بوت‌استرپ رو باز کرد؟

بHow to manually open Bootstrap 5 modals with vanilla JavaScript?

سلام، من دارم با بوت‌ استرپ  کار میکنم و میخوام یه مدال رو به صورت دستی با استفاده از جاوا اسکریپت خام باز کنم. توی داک بوت‌ استرپ نوشته که میشه با استفاده از متد show این کار رو انجام داد، ولی وقتی من از این متد استفاده میکنم، مدال باز نمیشه.

پاسخ

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

<!-- 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 
var myModal = new bootstrap.Modal(document.getElementById('myModal')); 
// Show the modal 
myModal.show();

مطمئن شو که فایل‌های جاوا اسکریپت بوت‌ استرپ به درستی تو پروژه‌ ات اضافه شده باشن. برای این کار باید از فایل‌های bootstrap.bundle.min.js و bootstrap.min.css استفاده کنی

اگر باز هم مدال باز نشد، مطمئن شو که هیچ خطای جاوا اسکریپتی تو کنسول مرورگر وجود نداره و کدهای مربوط به بوت‌ استرپ به درستی لود شدن

پاسخ: 1403/06/02
آخرین آپدیت: 1403/07/28