- var page_Title = 'Animated Modal';
- var custom_animated       = true;
- var animate1              = true;
- var modal                 = true;
- var theme_customizer      = true;
- var animate               = true;
- var modal_animated        = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Animated Modal
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Bonus Ui
                    li.breadcrumb-item.active Animated Modal
          // Container-fluid starts
          .container.animated-modal-page
            .grid.grid-cols-12.card-gap
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Modal with Animations
                    p.f-m-light.mt-1 
                      | Make use of the various modal fades and animations.
                  .card-body.animated-modal-wrapper
                    .common-align
                      .grid.grid-cols-12.gap-4
                        div(class="col-span-6 md:col-span-12 col-start-4 xl:col-start-0")
                          #animation-box.animate-img
                            .card.mb-0
                              .animate-widget
                                div
                                  img.max-w-full(src='../assets/images/slider/6.jpg', alt='Drawing-room')
                                .text-center.p-25
                                  h5 It&apos;s Magic!!
                                  span.f-light Select the animation options given below and then click on the launch button.
                                  p
                        div(class="col-span-6 xl:col-span-12 col-start-4 xl:col-start-0")
                          form.form-inline.theme-form.animated-modal
                            .animated-modal-md-mb.grid.grid-cols-12
                              label.mb-0.custom-col-2(class="col-span-2 md:col-span-12") IN
                              select#entrance.form-select.w-full(class="col-span-10 md:col-span-12")
                                optgroup(label='Attention Seekers')
                                  option(value='bounce') bounce
                                  option(value='flash') flash
                                  option(value='pulse') pulse
                                  option(value='rubberBand') rubberBand
                                  option(value='shake') shake
                                  option(value='swing') swing
                                  option(value='tada') tada
                                  option(value='wobble') wobble
                                  option(value='jello') jello
                                optgroup(label='Bouncing Entrances')
                                  option(value='bounceIn', selected='') bounceIn
                                  option(value='bounceInDown') bounceInDown
                                  option(value='bounceInLeft') bounceInLeft
                                  option(value='bounceInRight') bounceInRight
                                  option(value='bounceInUp') bounceInUp
                                optgroup(label='Fading Entrances')
                                  option(value='fadeIn') fadeIn
                                  option(value='fadeInDown') fadeInDown
                                  option(value='fadeInDownBig') fadeInDownBig
                                  option(value='fadeInLeft') fadeInLeft
                                  option(value='fadeInLeftBig') fadeInLeftBig
                                  option(value='fadeInRight') fadeInRight
                                  option(value='fadeInRightBig') fadeInRightBig
                                  option(value='fadeInUp') fadeInUp
                                  option(value='fadeInUpBig') fadeInUpBig
                                optgroup(label='Flippers')
                                  option(value='flipInX') flipInX
                                  option(value='flipInY') flipInY
                                optgroup(label='Lightspeed')
                                  option(value='lightSpeedIn') lightSpeedIn
                                optgroup(label='Rotating Entrances')
                                  option(value='rotateIn') rotateIn
                                  option(value='rotateInDownLeft') rotateInDownLeft
                                  option(value='rotateInDownRight') rotateInDownRight
                                  option(value='rotateInUpLeft') rotateInUpLeft
                                  option(value='rotateInUpRight') rotateInUpRight
                                optgroup(label='Sliding Entrances')
                                  option(value='slideInUp') slideInUp
                                  option(value='slideInDown') slideInDown
                                  option(value='slideInLeft') slideInLeft
                                  option(value='slideInRight') slideInRight
                                optgroup(label='Zoom Entrances')
                                  option(value='zoomIn') zoomIn
                                  option(value='zoomInDown') zoomInDown
                                  option(value='zoomInLeft') zoomInLeft
                                  option(value='zoomInRight') zoomInRight
                                  option(value='zoomInUp') zoomInUp
                                optgroup(label='Specials')
                                  option(value='rollIn') rollIn
                            .grid.grid-cols-12.animated-modal-md-mb
                              div(class="col-span-2 md:col-span-12")
                                label.mb-0.custom-col-2 OUT
                              select#exit.form-select.w-full(class="col-span-10 md:col-span-12")
                                optgroup(label='Attention Seekers')
                                  option(value='bounce') bounce
                                  option(value='flash') flash
                                  option(value='pulse') pulse
                                  option(value='rubberBand') rubberBand
                                  option(value='shake') shake
                                  option(value='swing') swing
                                  option(value='tada') tada
                                  option(value='wobble') wobble
                                  option(value='jello') jello
                                optgroup(label='Bouncing Exits')
                                  option(value='bounceOut') bounceOut
                                  option(value='bounceOutDown') bounceOutDown
                                  option(value='bounceOutLeft') bounceOutLeft
                                  option(value='bounceOutRight') bounceOutRight
                                  option(value='bounceOutUp') bounceOutUp
                                optgroup(label='Fading Exits')
                                  option(value='fadeOut') fadeOut
                                  option(value='fadeOutDown') fadeOutDown
                                  option(value='fadeOutDownBig') fadeOutDownBig
                                  option(value='fadeOutLeft') fadeOutLeft
                                  option(value='fadeOutLeftBig') fadeOutLeftBig
                                  option(value='fadeOutRight') fadeOutRight
                                  option(value='fadeOutRightBig') fadeOutRightBig
                                  option(value='fadeOutUp') fadeOutUp
                                  option(value='fadeOutUpBig') fadeOutUpBig
                                optgroup(label='Flippers')
                                  option(value='flipOutX', selected='') flipOutX
                                  option(value='flipOutY') flipOutY
                                optgroup(label='Lightspeed')
                                  option(value='lightSpeedOut') lightSpeedOut
                                optgroup(label='Rotating Exits')
                                  option(value='rotateOut') rotateOut
                                  option(value='rotateOutDownLeft') rotateOutDownLeft
                                  option(value='rotateOutDownRight') rotateOutDownRight
                                  option(value='rotateOutUpLeft') rotateOutUpLeft
                                  option(value='rotateOutUpRight') rotateOutUpRight
                                optgroup(label='Sliding Exits')
                                  option(value='slideOutUp') slideOutUp
                                  option(value='slideOutDown') slideOutDown
                                  option(value='slideOutLeft') slideOutLeft
                                  option(value='slideOutRight') slideOutRight
                                optgroup(label='Zoom Exits')
                                  option(value='zoomOut') zoomOut
                                  option(value='zoomOutDown') zoomOutDown
                                  option(value='zoomOutLeft') zoomOutLeft
                                  option(value='zoomOutRight') zoomOutRight
                                  option(value='zoomOutUp') zoomOutUp
                                optgroup(label='Specials')
                                  option(value='rollOut') rollOut
                            // Button trigger modal
                            .mt-2.text-center.w-full
                              button.btn.btn-primary.text-white(type='button', data-bs-toggle='modal', data-bs-target='#myModal')
                                | Launch Modal
                      // Popup
                      #myModal.modal.fade.modal-popup(tabindex='-1', role='dialog')
                        .modal-dialog(role='document')
                          div
                            button.btn-close.theme-close(type='button', data-bs-dismiss='modal', aria-label='Close')
                            .modal-body
                              .card
                                .animate-widget
                                  div
                                    img.max-w-full.h-auto(src='../assets/images/slider/6.jpg', alt='Drawing-room')
                                  .text-center.p-25
                                    p.text-muted.mb-0
                                      strong.txt-danger Wow!!!
                                      |  It's so beautiful animations in cuba theme...
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
