مودالهای پیشفرض#
با کلیک بر روی دکمه زیر، یک نمونه کارامد از مودال را روشن کنید. این مودال از بالای صفحه پایین میآید و ظاهر میشود.
<!-- دکمه برای باز کردن مودال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
باز کردن نمونه مودال
</button>
<!-- مودال -->
<div class="modal fade" id="exampleModal" 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">عنوان مودال</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
<p>هورا، شما در حال خواندن این متن در یک مودال هستید!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
<button type="button" class="btn btn-primary">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>
پسزمینه استاتیک #
وقتی که پسزمینه روی حالت استاتیک تنظیم شود، مودال وقتی که بیرون از آن کلیک میشود بسته نخواهد شد. دکمه زیر را کلیک کنید تا این را تجربه کنید.
<!-- دکمه برای باز کردن مودال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
باز کردن مودال با پسزمینه استاتیک
</button>
<!-- مودال -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">عنوان مودال</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
<p>اگر بیرون از من کلیک کنید، بسته نمیشوم. حتی سعی نکنید کلید Esc را فشار دهید.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
<button type="button" class="btn btn-primary">متوجه شدم</button>
</div>
</div>
</div>
</div>
محتوای طولانی با اسکرول #
وقتی مودالها برای دید کاربر یا دستگاه او خیلی طولانی میشوند، آنها مستقل از خود صفحه اسکرول میشوند. دمو زیر را امتحان کنید تا بفهمید منظور ما چیست.
<!-- دکمه برای باز کردن مودال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
باز کردن نمونه مودال
</button>
<!-- مودال -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">عنوان مودال</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body" style="min-height: 1500px">
<p>این یک محتوای نمونه است تا رفتار اسکرول کردن برای مودالها را نشان دهد. به جای تکرار متن در مودال، ما از یک استایل درونخط برای تنظیم ارتفاع حداقلی استفاده میکنیم، و به این ترتیب طول کلی مودال را افزایش میدهیم و نشان میدهیم که چگونه اسکرول کردن عمل میکند. وقتی محتوا از ارتفاع نمای در دسترس طولانیتر شود، اسکرول کردن مودال را بهطور لازم حرکت میدهد.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
<button type="button" class="btn btn-primary">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>
شما همچنین میتوانید یک مودال قابل اسکرول ایجاد کنید که به شما امکان اسکرول کردن محتوای مودال را میدهد با اضافه کردن .modal-dialog-scrollable به .modal-dialog.
<!-- دکمه برای باز کردن مودال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">
باز کردن نمونه مودال
</button>
<!-- مودال -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">عنوان مودال</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
<p>این یک محتوای نمونه است تا رفتار اسکرول کردن برای مودالها را نشان دهد. ما از شکست خط تکراری استفاده میکنیم تا نشان دهیم که چگونه محتوا میتواند از حداقل ارتفاع داخلی فراتر برود و به این ترتیب اسکرول ا داخلی را نشان دهیم. وقتی محتوا از max-height پیشفرض مودال طولانیتر شود، محتوا درون مودال برش داده خواهد شد و قابل اسکرول است.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>این محتوا باید بعد از اسکرول کردن در انتها ظاهر شود.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
<button type="button" class="btn btn-primary">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>
موقعیت مدال #
به .modal-dialog .modal-dialog-centered را اضافه کنید تا مدال به صورت عمودی مرکز یابی شود.
<!-- دکمه ایجاد مدال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
مدال عمودی مرکز یابی شده
</button>
<!-- مدال -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">عنوان مدال</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
<p>این یک مدال عمودی مرکز یابی شده است.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
<button type="button" class="btn btn-primary">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>
<!-- دکمه ایجاد مدال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
مدال قابل اسکرول عمودی مرکز یابی شده
</button>
<!-- مدال -->
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان مدال</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
<p>این یک محتوای نمونه است که برای نمایش مدال عمودی مرکز یابی شده نشان داده شده است. ما برخی متنهای اضافی به اینجا اضافه کردیم تا نشان دهیم چگونه مرکز یابی عمودی وقتی با مدالهای قابل اسکرول ترکیب میشوند، کار میکند. ما همچنین از برخی خطهای تکراری برای به سرعت افزایش ارتفاع محتوا استفاده کردیم که منجر به فعال شدن اسکرول میشود. وقتی محتوا طولانیتر از حداکثر ارتفاع تعریف شده برای مدال میشود، محتوا درون مدال برش میخورد و قابل اسکرول میشود.</p>
<br><br><br><br><br><br><br><br><br><br>
<p>دقیقاً به همین شکل.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
<button type="button" class="btn btn-primary">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>
موقعیت مدال را مشخص کنید. میتوانید مدال را در بالا یا پایین صفحه با تعیین کلاسهای modal-top و modal-bottom به ترتیب نمایش دهید.
<!-- دکمه ایجاد مدال -->
<div class="hstack gap-2">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#topModal">مدال بالا</button>
<button type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target="#bottomModal">مدال پایین</button>
</div>
<!-- مدال بالا -->
<div id="topModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="topModalLabel" aria-hidden="true">
<div class="modal-dialog modal-top">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="topModalLabel">عنوان مدال</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
<h6>متن در یک مدال</h6>
<p class="mb-0">Duis mollis، est non commodo luctus، nisi erat porttitor ligula.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">بستن</button>
<button type="button" class="btn btn-primary">ذخیره تغییرات</button>
</div>
</div> <!-- پایان محتوای مدال -->
</div> <!-- پایان دیالوگ مدال -->
</div> <!-- پایان مدال -->
<!-- مدال پایین -->
<div id="bottomModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="bottomModalLabel" aria-hidden="true">
<div class="modal-dialog modal-bottom">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bottomModalLabel">عنوان مدال</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
<h6>متن در یک مدال</h6>
<p class="mb-0">Duis mollis، est non commodo luctus، nisi erat porttitor ligula.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">بستن</button>
<button type="button" class="btn btn-primary">ذخیره تغییرات</button>
</div>
</div> <!-- پایان محتوای مدال -->
</div> <!-- پایان دیالوگ مدال -->
</div> <!-- پایان مدال -->
سوییچ بین مدالها #
بین چندین مدال با قرار دادن درست data-bs-target و data-bs-toggle سوییچ کنید. برای مثال، شما میتوانید یک مدال بازنشانی رمز عبور را در درون یک مدال ورود باز کنید. لطفاً توجه داشته باشید که چندین مدال نمیتوانند به طور همزمان باز شوند—این روش فقط بین دو مدال جداگانه سوییچ میکند.
<!-- دکمه ایجاد مدال -->
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">باز کردن مدال اول</a>
<!-- مدال اول -->
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">مدال 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
یک مدال دوم را نشان دهید و این را با دکمه زیر پنهان کنید.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">باز کردن
مدال دوم</button>
</div>
</div>
</div>
</div>
<!-- مدال دوم -->
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">مدال 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
این مدال را پنهان کنید و با دکمه پایین نخستین را نشان دهید.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">بازگشت به
اولی</button>
</div>
</div>
</div>
</div>
اندازههای دلخواه #
مدالها سه اندازه اختیاری دارند که با کلاسهای اصلاحکننده بر روی .modal-dialog قابل دسترسی هستند. این اندازهها در نقاط شکست معین فعال میشوند تا از ظهور نوار اسکرول افقی در اندازههای باریک جلوگیری کنند.
<div class="hstack gap-2">
<!-- دکمه ایجاد مدال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalXl">مدال خیلی بزرگ</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLg">مدال بزرگ</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalSm">مدال کوچک</button>
</div>
<!-- مدال -->
<div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalXlLabel">مدال خیلی بزرگ</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalLg" tabindex="-1" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalLgLabel">مدال بزرگ</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalSm" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalSmLabel">مدال کوچک</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
مدل تمام صفحه #
مدلها دارای سه اندازه اختیاری هستند که از طریق کلاسهای اصلاحگر روی .modal-dialog قرار میگیرند. این اندازهها در نقاط شکست خاصی فعال میشوند تا از نوار اسکرول افقی در نمای باریکتر جلوگیری کنند.
<!-- دکمهای برای باز کردن مدل -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">تمام صفحه</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenSm">تمام صفحه در اندازه کوچک</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">تمام صفحه در اندازه متوسط</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">تمام صفحه در اندازه بزرگ</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">تمام صفحه در اندازه خیلی بزرگ</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">تمام صفحه در اندازه فوقالعاده بزرگ</button>
<!-- مدل -->
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">مدل تمام صفحه</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1" aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">تمام صفحه در اندازه کوچک</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1" aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">تمام صفحه در اندازه متوسط</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">تمام صفحه در اندازه بزرگ</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1" aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xl-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">تمام صفحه در اندازه خیلی بزرگ</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xxl-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">تمام صفحه در اندازه فوقالعاده بزرگ</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
هشدارهای مبتنی بر مدل #
مدلها دارای سه اندازه اختیاری هستند که از طریق کلاسهای اصلاحگر روی .modal-dialog قرار میگیرند. این اندازهها در نقاط شکست خاصی فعال میشوند تا از نوار اسکرول افقی در نمای باریکتر جلوگیری کنند.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#primaryAlertModal">هشدار اولیه</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#secondaryAlertModal">هشدار ثانویه</button>
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#successAlertModal">هشدار موفقیت</button>
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#infoALertModal">هشدار اطلاعات</button>
<!-- مدل هشدار اولیه -->
<div id="primaryAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-primary">
<div class="modal-body">
<div class="text-center">
<i class="bx bx-check h1 mt-0 text-white"></i>
<h4 class="mt-3 text-white">آفرین!</h4>
<p class="mt-3">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
<button type="button" class="btn btn-light mt-3" data-bs-dismiss="modal">ادامه</button>
</div>
</div> <!-- پایان بدنه مدل -->
</div><!-- پایان محتوای مدل -->
</div><!-- پایان گفتگوی مدل -->
</div> <!-- پایان مدل -->
<!-- مدل هشدار ثانویه -->
<div id="secondaryAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-secondary">
<div class="modal-body">
<div class="text-center">
<i class="bx bx-check h1 mt-0 text-white"></i>
<h4 class="mt-3 text-white">آفرین!</h4>
<p class="mt-3">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
<button type="button" class="btn btn-light mt-3" data-bs-dismiss="modal">ادامه</button>
</div>
</div> <!-- پایان بدنه مدل -->
</div><!-- پایان محتوای مدل -->
</div><!-- پایان گفتگوی مدل -->
</div> <!-- پایان مدل -->
<!-- مدل هشدار موفقیت -->
<div id="successAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-success">
<div class="modal-body">
<div class="text-center">
<i class="bx bx-check h1 mt-0 text-white"></i>
<h4 class="mt-3 text-white">آفرین!</h4>
<p class="mt-3">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
<button type="button" class="btn btn-light mt-3" data-bs-dismiss="modal">ادامه</button>
</div>
</div> <!-- پایان بدنه مدل -->
</div><!-- پایان محتوای مدل -->
</div><!-- پایان گفتگوی مدل -->
</div> <!-- پایان مدل -->
<!-- مدل هشدار اطلاعات -->
<div id="infoALertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-filled bg-info">
<div class="modal-body">
<div class="text-center">
<i class="bx bx-check h1 mt-0 text-white"></i>
<h4 class="mt-3 text-white">آفرین!</h4>
<p class="mt-3">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
<button type="button" class="btn btn-light mt-3" data-bs-dismiss="modal">ادامه</button>
</div>
</div> <!-- پایان بدنه مدل -->
</div><!-- پایان محتوای مدل -->
</div><!-- پایان گفتگوی مدل -->
</div> <!-- پایان مدل -->