Change the Bootstrap Modal effect

Question

I found this Demo     The demo have a pretty effect  I wonder if any one have way to apply this demos to be easy to use with bootstrap Modal  specially the first one  Fade In  amp  Scale

User · Answer

Modal In Out Effect with Animate css and jquery Very easy and short code   In HTML    lt div class  modal fade  id  DirectorModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-dialog bounceInDown animated  gt  lt  -- Add here Modal COME Effect  Animate css  -- gt           lt div class  modal-content  gt            lt div class  modal-header  gt             lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt              lt h4 class  modal-title  gt Modal Header lt  h4 gt             lt  div gt             lt div class  modal-body  gt             lt  div gt           lt  div gt       lt  div gt   lt  div gt    this bellow jquery code i got from  https   codepen io nhembram pen PzyYLL  i am modify this for regular use   jquery code    lt script gt        document  ready function             BS MODAL OPEN CLOSE EFFECT  ---------------------------------         var timeoutHandler   null              modal   on  hide bs modal   function  e                var anim       modal-dialog   removeClass  bounceInDown   addClass  fadeOutDownBig       Model Come class Remove  amp  Out effect class add             if  timeoutHandler  clearTimeout timeoutHandler               timeoutHandler   setTimeout function                         modal-dialog   removeClass  fadeOutDownBig   addClass  bounceInDown       Model Out class Remove  amp  Come effect class add                500      some delay for complete Animation                          lt  script gt

User · Answer

x000D   x000D   custom-modal-header x000D    x000D      display  block  x000D    x000D   custom-modal  modal-content x000D    x000D      width 500px  x000D      border  none  x000D    x000D   custom-modal x000D    x000D      display  block  important  x000D    x000D   custom-fade  modal-dialog   x000D      transform  translateY 4    x000D      opacity  0  x000D      -webkit-transition  all  2s ease-out  x000D      -o-transition  all  2s ease-out  x000D      transition  all  2s ease-out  x000D      will-change  transform  x000D    x000D   custom-fade in  modal-dialog    x000D      opacity  1  x000D      transform  translateY 0    x000D    x000D   lt div class  modal custom-modal custom-fade  tabindex  -1  role  dialog  x000D       aria-hidden  true  gt  x000D       lt div class  modal-dialog modal-lg  gt  x000D           lt div class  modal-content  gt  x000D               lt div class  modal-header  gt  x000D                   lt h5 class  modal-title  gt Title lt  h5 gt  x000D               lt  div gt  x000D               lt div class  modal-body  gt  x000D                   lt p gt My cat is dope  lt  p gt  x000D               lt  div gt  x000D               lt div class  modal-footer  gt  x000D                   lt button type  button  class  btn btn-primary  data-dismiss  modal  gt Sure  Meow  lt  button gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is pure Bootstrap 4 with CSS 3 solution.

<div class="modal fade2" 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">
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

.fade2 {
    transform: scale(0.9);
    opacity: 0;
    transition: all .2s linear;
    display: block !important;
}

.fade2.show {
    opacity: 1;
    transform: scale(1);
}

$('#exampleModal').modal();

function afterModalTransition(e) {
  e.setAttribute("style", "display: none !important;");
}
$('#exampleModal').on('hide.bs.modal', function (e) {
    setTimeout( () => afterModalTransition(this), 200);
})

Full example here.

Maybe it will help someone.

--

Thank you @DavidDomain too.

User · Answer

A riot js solution   My riot js Example nests the animated-modal tag inside an order profile tag    Note  this assumes jquery and riot js is loaded before   animated-modal tag contents    lt a id    opts el    href    class  pull-right  gt edit lt  a gt        lt div class  modal animated  id    opts el  -modal  tabindex  -1  role  dialog  aria-labelledby  animatedModal  gt         lt div class  modal-dialog modal-lg  gt           lt div class  modal-content  gt             lt div class  modal-header  gt               lt button onclick   cancelForm   id    opts el  -cancel-1  type  button  class  close   gt  lt span gt  amp times  lt  span gt  lt  button gt               lt h4 class  modal-title  id  animatedModal  gt   opts title   lt  h4 gt             lt  div gt             lt div class  modal-body  gt                 lt yield  gt             lt  div gt             lt div class  modal-footer  gt               lt button onclick   cancelForm   id    opts el  -cancel-2  onclick   cancelForm   type  button  class  btn btn-default  gt Close lt  button gt               lt button onclick   saveForm   type  button  class  btn btn-primary  gt Save changes lt  button gt             lt  div gt            lt  div gt         lt  div gt       lt  div gt        lt script gt      var self   this     self modalBtn       opts el       self modal       opts el -modal      self animateInClass   opts animatein     fadeIn      self animateOutClass   opts animateout     fadeOut      self closeModalBtn        opts el  -cancel-1      opts el  -cancel-2      self animationsStr    webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend       this on  mount  function            self initModal           self update               this initModal   function            modal     self modal          modalBtn     self modalBtn          closeModalBtn        opts el  -cancel-1           modalBtn click function                  self modal  addClass self animateInClass                self modal  modal  show                          self modal  on  show bs modal  function                  self closeModalBtn  one  click  function                      self modal  removeClass self animateInClass  addClass self animateOutClass                     self modal  on self animationsStr function                          self modal  modal  hide                                                            self modal  on  hidden bs modal  function evt                 self modal  removeClass self animateOutClass                self modal  off self animationsStr                self closeModalBtn  off  click                         this cancelForm   function e           this parent cancelForm              this showEdit   function e           this parent showEdit              this saveForm   function e           this parent saveForm              dashboard v2 bus on  closeModal  function            try                     opts el  -cancel-1   trigger  click            catch e             lt  script gt      And the Profile Tag to nest in   profile tag contents    lt div class  row  gt           lt div class  col-md-12  gt               lt div class  eshop-product-body  gt                    lt animated-modal gt                      title  Order Edit                      el  order-modal-1  gt                        lt div class  row  gt                           lt div class  col-md-6 col-md-offset-3  gt                               lt form id  profile-form  gt                                   lt div class  form-group  gt                                       lt label gt Organization lt  label gt                                       lt input id  organization  type  text  class  form-control  id  exampleInputEmail1  placeholder  Email  gt                                   lt  div gt                                    lt div class  form-group  gt                                       lt label gt Contact lt  label gt                                       lt input id  contact  type  text  class  form-control  id  exampleInputEmail1  placeholder  Email  gt                                   lt  div gt                                    lt div class  form-group  gt                                       lt label gt Phone lt  label gt                                       lt input id  phone  type  text  class  form-control  id  exampleInputEmail1  placeholder  Email  gt                                   lt  div gt                                    lt div class  form-group  gt                                       lt label gt Email lt  label gt                                       lt input id  email  type  email  class  form-control  id  exampleInputEmail1  placeholder  Email  gt                                   lt  div gt                               lt  form gt                           lt  div gt                       lt  div gt                    lt  animated-modal gt                    lt h3 gt Profile lt  h3 gt                    lt ul class  profile-list  gt                       lt li gt Organization    opts data profile organization   lt  li gt                       lt li gt Contact    opts data profile contact full name   lt  li gt                       lt li gt Phone    opts data profile phone number   lt  li gt                       lt li gt Email    opts data profile email   lt  li gt                   lt  ul gt               lt  div gt           lt  div gt       lt  div gt        lt script gt          var self   this               this on  mount  function                         this cancelForm   function e                       this showEdit   function e                       this saveForm   function e                   lt  script gt

User · Answer

I copied model code from w3school bootstrap model and added following css  This code provides beautiful animation  You can try it    modal fade  modal-dialog        -webkit-transform  scale 0 1        -moz-transform  scale 0 1        -ms-transform  scale 0 1        transform  scale 0 1        top  300px       opacity  0       -webkit-transition  all 0 3s       -moz-transition  all 0 3s       transition  all 0 3s      modal fade in  modal-dialog       -webkit-transform  scale 1       -moz-transform  scale 1       -ms-transform  scale 1       transform  scale 1       -webkit-transform  translate3d 0  -300px  0       transform  translate3d 0  -300px  0       opacity  1

User · Answer

If you take a look at the bootstraps fade class used with the modal window you will find  that all it does  is to set the opacity value to 0 and adds a transition for the opacity rule   Whenever you launch a modal the in class is added and will change the opacity to a value of 1   Knowing that you can easily build your own fade-scale class   Here is an example    x000D   x000D   import url  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css    x000D   x000D   fade-scale   x000D    transform  scale 0   x000D    opacity  0  x000D    -webkit-transition  all  25s linear  x000D    -o-transition  all  25s linear  x000D    transition  all  25s linear  x000D    x000D   x000D   fade-scale in   x000D    opacity  1  x000D    transform  scale 1   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt  -- Button trigger modal -- gt  x000D   lt button type  button  class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal  gt  x000D    Launch demo modal x000D   lt  button gt  x000D   x000D   lt  -- Modal -- gt  x000D   lt div class  modal fade-scale  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt  x000D           lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D              x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    -- UPDATE --  This answer is getting more up votes lately so i figured i add an update to show how easy it is to customize the BS modal in and out animations with the help of the great Animate css library by Daniel Eden   All that needs to be done is to include the stylesheet to your  lt head gt  lt  head gt  section  Now you simply need to add the animated class  plus one of the entrance classes of the library to the modal element    lt div class  modal animated fadeIn  id  myModal  tabindex  -1  role  dialog      gt         lt  div gt    But there is also a way to add an out animation to the modal window and since the library has a bunch of cool animations that will make an element disappear  why not use them      To use them you will need to toggle the classes on the modal element  so it is actually better to call the modal window via JavaScript  which is described here   You will also need to listen for some of the modal events to know when it s time to add or remove the classes from the modal element  The events being fired are described here   To trigger a custom out animation you can t use the data-dismiss  modal  attribute on a button inside the modal window that s suppose to close the modal  You can simply add your own attribute like data-custom-dismiss  modal  and use that to call the    selector   modal   hide   method on it     Here is an example that shows all the different possibilities    x000D   x000D     ------------------------------------------------------- x000D    This first part can be ignored  it is just getting x000D    all the different entrance and exit classes of the x000D    animate-config json file from the github repo  x000D  ---------------------------------------------------------    x000D   x000D  var animCssConfURL    https   api github com repos daneden animate css contents animate-config json   x000D  var selectIn       animation-in-types    x000D  var selectOut       animation-out-types    x000D  var getAnimCSSConfig   function   url     return   ajax    url  url  type   get   dataType   json         x000D  var decode   function   data     x000D    var bin   Uint8Array from  atob  data  content      function  char     return char charCodeAt  0        x000D    var bin2Str   String fromCharCode apply  null  bin    x000D    return JSON parse  bin2Str   x000D    x000D  var buildSelect   function   which  name  animGrp     x000D    var grp       lt optgroup gt  lt  optgroup gt     x000D    grp attr  label   name   x000D      each animGrp  function   idx  animType     x000D      var opt       lt option gt  lt  option gt    x000D      opt attr  value   idx  x000D      opt text idx  x000D      grp append opt   x000D       x000D    which append grp   x000D    x000D  getAnimCSSConfig  animCssConfURL   x000D     done  function   data     x000D    var animCssConf   decode   data    x000D      each animCssConf  function name  animGrp    x000D      if     entrances  test name      x000D        buildSelect selectIn  name  animGrp   x000D        x000D      if     exits  test name      x000D        buildSelect selectOut  name  animGrp   x000D        x000D       x000D     x000D   x000D   x000D     ------------------------------------------------------- x000D    Here is were the fun begins  x000D  ---------------------------------------------------------    x000D   x000D  var modalBtn      button    x000D  var modal       myModal    x000D  var animInClass       x000D  var animOutClass       x000D   x000D  modalBtn on  click   function     x000D    animInClass   selectIn find  option selected   val    x000D    animOutClass   selectOut find  option selected   val    x000D    if   animInClass          animOutClass           x000D      alert  Please select an in and out animation type     x000D      else   x000D      modal addClass animInClass   x000D      modal modal  backdrop  false    x000D      x000D     x000D   x000D  modal on  show bs modal   function      x000D    var closeModalBtns   modal find  button data-custom-dismiss  modal      x000D    closeModalBtns one  click   function     x000D      modal on  webkitAnimationEnd oanimationend msAnimationEnd animationend   function  evt     x000D        modal modal  hide   x000D          x000D      modal removeClass animInClass  addClass animOutClass   x000D       x000D     x000D   x000D  modal on  hidden bs modal   function   evt     x000D    var closeModalBtns   modal find  button data-custom-dismiss  modal      x000D    modal removeClass animOutClass  x000D    modal off  webkitAnimationEnd oanimationend msAnimationEnd animationend   x000D    closeModalBtns off  click   x000D     x000D   import url  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css    x000D   import url  https   cdnjs cloudflare com ajax libs animate css 3 5 2 animate css    x000D   x000D  select  button not  data-custom-dismiss  modal      x000D    margin  10px 0  x000D    width  220px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4  gt  x000D         lt select id  animation-in-types  gt  x000D           lt option value    selected gt Choose animation-in type lt  option gt  x000D         lt  select gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt div class  col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4  gt  x000D         lt select id  animation-out-types  gt  x000D           lt option value    selected gt Choose animation-out type lt  option gt  x000D         lt  select gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt div class  col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4  gt  x000D         lt button class  btn btn-default  gt Open Modal lt  button gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt  -- Modal -- gt  x000D   lt div class  modal animated  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-custom-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt  x000D           lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D              x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-default  data-custom-dismiss  modal  gt Close lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

body    text-align center    padding 50px     modal fade    opacity 1     modal fade  modal-dialog      -webkit-transform  translate 0      -moz-transform  translate 0      transform  translate 0      btn-black    position absolute    bottom 50px    transform translateX -50      background  222    padding 10px 20px    text-transform uppercase    letter-spacing 1px    font-size 14px    font-weight bold          lt div class  container  gt       lt form class  form-inline  style  position absolute  top 40   left 50   transform translateX -50     gt           lt div class  form-group  gt           lt label gt Entrances lt  label gt             lt select class  form-control  id  entrance  gt               lt optgroup label  Attention Seekers  gt                 lt option value  bounce  gt bounce lt  option gt                 lt option value  flash  gt flash lt  option gt                 lt option value  pulse  gt pulse lt  option gt                 lt option value  rubberBand  gt rubberBand lt  option gt                 lt option value  shake  gt shake lt  option gt                 lt option value  swing  gt swing lt  option gt                 lt option value  tada  gt tada lt  option gt                 lt option value  wobble  gt wobble lt  option gt                 lt option value  jello  gt jello lt  option gt               lt  optgroup gt               lt optgroup label  Bouncing Entrances  gt                 lt option value  bounceIn  selected gt bounceIn lt  option gt                 lt option value  bounceInDown  gt bounceInDown lt  option gt                 lt option value  bounceInLeft  gt bounceInLeft lt  option gt                 lt option value  bounceInRight  gt bounceInRight lt  option gt                 lt option value  bounceInUp  gt bounceInUp lt  option gt               lt  optgroup gt               lt optgroup label  Fading Entrances  gt                 lt option value  fadeIn  gt fadeIn lt  option gt                 lt option value  fadeInDown  gt fadeInDown lt  option gt                 lt option value  fadeInDownBig  gt fadeInDownBig lt  option gt                 lt option value  fadeInLeft  gt fadeInLeft lt  option gt                 lt option value  fadeInLeftBig  gt fadeInLeftBig lt  option gt                 lt option value  fadeInRight  gt fadeInRight lt  option gt                 lt option value  fadeInRightBig  gt fadeInRightBig lt  option gt                 lt option value  fadeInUp  gt fadeInUp lt  option gt                 lt option value  fadeInUpBig  gt fadeInUpBig lt  option gt               lt  optgroup gt               lt optgroup label  Flippers  gt                 lt option value  flipInX  gt flipInX lt  option gt                 lt option value  flipInY  gt flipInY lt  option gt               lt  optgroup gt               lt optgroup label  Lightspeed  gt                 lt option value  lightSpeedIn  gt lightSpeedIn lt  option gt               lt  optgroup gt               lt optgroup label  Rotating Entrances  gt                 lt option value  rotateIn  gt rotateIn lt  option gt                 lt option value  rotateInDownLeft  gt rotateInDownLeft lt  option gt                 lt option value  rotateInDownRight  gt rotateInDownRight lt  option gt                 lt option value  rotateInUpLeft  gt rotateInUpLeft lt  option gt                 lt option value  rotateInUpRight  gt rotateInUpRight lt  option gt               lt  optgroup gt               lt optgroup label  Sliding Entrances  gt                 lt option value  slideInUp  gt slideInUp lt  option gt                 lt option value  slideInDown  gt slideInDown lt  option gt                 lt option value  slideInLeft  gt slideInLeft lt  option gt                 lt option value  slideInRight  gt slideInRight lt  option gt               lt  optgroup gt               lt optgroup label  Zoom Entrances  gt                 lt option value  zoomIn  gt zoomIn lt  option gt                 lt option value  zoomInDown  gt zoomInDown lt  option gt                 lt option value  zoomInLeft  gt zoomInLeft lt  option gt                 lt option value  zoomInRight  gt zoomInRight lt  option gt                 lt option value  zoomInUp  gt zoomInUp lt  option gt               lt  optgroup gt                lt optgroup label  Specials  gt                 lt option value  rollIn  gt rollIn lt  option gt               lt  optgroup gt             lt  select gt          lt  div gt           lt div class  form-group  gt           lt label gt Exits lt  label gt             lt select class  form-control  id  exit  gt               lt optgroup label  Attention Seekers  gt                 lt option value  bounce  gt bounce lt  option gt                 lt option value  flash  gt flash lt  option gt                 lt option value  pulse  gt pulse lt  option gt                 lt option value  rubberBand  gt rubberBand lt  option gt                 lt option value  shake  gt shake lt  option gt                 lt option value  swing  gt swing lt  option gt                 lt option value  tada  gt tada lt  option gt                 lt option value  wobble  gt wobble lt  option gt                 lt option value  jello  gt jello lt  option gt               lt  optgroup gt               lt optgroup label  Bouncing Exits  gt                 lt option value  bounceOut  gt bounceOut lt  option gt                 lt option value  bounceOutDown  gt bounceOutDown lt  option gt                 lt option value  bounceOutLeft  gt bounceOutLeft lt  option gt                 lt option value  bounceOutRight  gt bounceOutRight lt  option gt                 lt option value  bounceOutUp  gt bounceOutUp lt  option gt               lt  optgroup gt               lt optgroup label  Fading Exits  gt                 lt option value  fadeOut  gt fadeOut lt  option gt                 lt option value  fadeOutDown  gt fadeOutDown lt  option gt                 lt option value  fadeOutDownBig  gt fadeOutDownBig lt  option gt                 lt option value  fadeOutLeft  gt fadeOutLeft lt  option gt                 lt option value  fadeOutLeftBig  gt fadeOutLeftBig lt  option gt                 lt option value  fadeOutRight  gt fadeOutRight lt  option gt                 lt option value  fadeOutRightBig  gt fadeOutRightBig lt  option gt                 lt option value  fadeOutUp  gt fadeOutUp lt  option gt                 lt option value  fadeOutUpBig  gt fadeOutUpBig lt  option gt               lt  optgroup gt               lt optgroup label  Flippers  gt                 lt option value  flipOutX  selected gt flipOutX lt  option gt                 lt option value  flipOutY  gt flipOutY lt  option gt               lt  optgroup gt               lt optgroup label  Lightspeed  gt                 lt option value  lightSpeedOut  gt lightSpeedOut lt  option gt               lt  optgroup gt               lt optgroup label  Rotating Exits  gt                 lt option value  rotateOut  gt rotateOut lt  option gt                 lt option value  rotateOutDownLeft  gt rotateOutDownLeft lt  option gt                 lt option value  rotateOutDownRight  gt rotateOutDownRight lt  option gt                 lt option value  rotateOutUpLeft  gt rotateOutUpLeft lt  option gt                 lt option value  rotateOutUpRight  gt rotateOutUpRight lt  option gt               lt  optgroup gt               lt optgroup label  Sliding Exits  gt                 lt option value  slideOutUp  gt slideOutUp lt  option gt                 lt option value  slideOutDown  gt slideOutDown lt  option gt                 lt option value  slideOutLeft  gt slideOutLeft lt  option gt                 lt option value  slideOutRight  gt slideOutRight lt  option gt               lt  optgroup gt                       lt optgroup label  Zoom Exits  gt                 lt option value  zoomOut  gt zoomOut lt  option gt                 lt option value  zoomOutDown  gt zoomOutDown lt  option gt                 lt option value  zoomOutLeft  gt zoomOutLeft lt  option gt                 lt option value  zoomOutRight  gt zoomOutRight lt  option gt                 lt option value  zoomOutUp  gt zoomOutUp lt  option gt               lt  optgroup gt               lt optgroup label  Specials  gt                 lt option value  rollOut  gt rollOut lt  option gt               lt  optgroup gt              lt  select gt          lt  div gt       lt  -- Button trigger modal -- gt       lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   myModal  gt        Launch demo modal      lt  button gt       lt  form gt          lt a class  btn btn-black   href  http   demo nhembram com bootstrap-modal-animation-with-animate-css index html  target   blank  gt View FullPage lt  a gt       lt  div gt       lt  -- Modal -- gt       lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt         lt div class  modal-dialog  role  document  gt           lt div class  modal-content  gt             lt div class  modal-header  gt               lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt               lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt             lt  div gt             lt div class  modal-body  gt                             lt  div gt             lt div class  modal-footer  gt               lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt               lt button type  button  class  btn btn-primary  gt Save changes lt  button gt             lt  div gt           lt  div gt         lt  div gt       lt  div gt        lt script gt      function testAnim x                modal  modal-dialog   attr  class    modal-dialog      x      animated                   myModal   on  show bs modal   function  e          var anim       entrance   val              testAnim anim                   myModal   on  hide bs modal   function  e          var anim       exit   val              testAnim anim                lt  script gt    lt style gt  body    text-align center    padding 50px     modal fade    opacity 1     modal fade  modal-dialog      -webkit-transform  translate 0      -moz-transform  translate 0      transform  translate 0      btn-black    position absolute    bottom 50px    transform translateX -50      background  222    padding 10px 20px    text-transform uppercase    letter-spacing 1px    font-size 14px    font-weight bold     lt  style gt

[twitter-bootstrap] Change the Bootstrap Modal effect

The answer is

Examples related to twitter-bootstrap

Examples related to css

Tags