مودال ها | CORK الگوی مدیریتی تمام ریسپانسیو

پایه ای محور عمودی حذف انیمیشن اندازه های اختیاری فیلم انیمیشن سبک مودال سفارشی

bootastap اساسی 4 معین.

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">عنوان معین</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <svg> ... </svg>
                </button>
            </div>
            <div class="modal-body">
                <p class="modal-text">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز </p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

استفاده از .modal-dialog-centered کلاس به صورت عمودی تراز معین.

حذف .fade کلاس برای حذف انیمیشن.

استفاده از .modal-xl کلاس برای فوق العاده بزرگ ، .modal-lg کلاس برای بزرگ و .modal-sm برای کوچک (مودال)

Bootstrap Modal برای استفاده از فیلم ها در داخل آنها گسترش یافته است.

===========
  Youtube
===========

<button id="yt-video-link" type="button" class="btn btn-primary mb-2 mr-2">پخش یوتیوب</button>
<!-- Modal -->
<div class="modal fade" id="videoMedia1" tabindex="-1" role="dialog" aria-labelledby="videoMedia1Label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" id="videoMedia1Label">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="video-container">
                </div>
            </div>
        </div>
    </div>
</div>

===========
  Vimeo
===========

<button id="vimeo-video-link" type="button" class="btn btn-primary mb-2 mr-2">پخش ویمو</button>
<!-- Modal -->
<div class="modal fade" id="videoMedia2" tabindex="-1" role="dialog" aria-labelledby="videoMedia2Label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" id="videoMedia2Label">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="video-container">
                </div>
            </div>
        </div>
    </div>
</div>

برای انیمیشن مودال از کلاس زیر استفاده شده در زیر استفاده کنید.

.fadeInDown

.slideInUp

.fadeInUp

.rotateInDownLeft

.fadeInLeft

.zoomInUp

.fadeInRight

بیشتر ماژول های سفارشی.

اولیه

محور عمودی

حذف animation

اندازه های اختیاری

ویدئو

مودال سبک انیمیشن

سفارشی

محسن رضایی

هومن شکیبا

زهرا جوان