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

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

ب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