i apply animations on bootstrap3 modal box using animate.css. not working me.
here code snippet
<html lang="en"> <head> <link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/custom/bootstrap.min.css" rel="stylesheet" /> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.css" rel="stylesheet" /> <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css" rel="stylesheet" /> </head> <body> <a href="#mymodal1" role="button" data-target="#mymodal1" class="btn btn-default" data-toggle="modal">fade inleft | outleft</a> <div id="mymodal1" class="modal animated fadeoutleft" data-easein="fadeinleft" data-easeout="fadeoutleft" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="mymodallabel">modal header 1</h4> </div> <div class="modal-body"> <p>one fine body…</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">close</button> <button class="btn btn-primary">save changes</button> </div> </div> </div> </div> <a href="#mymodal22" role="button" class="btn btn-default" data-toggle="modal">shake</a> <div id="mymodal22" class="modal animated rollout" data-easein="shake" data-easeout="rollout" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">modal header</h4> </div> <div class="modal-body"> <p>one fine body…</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">close</button> </div> </div> </div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script> </body> </html> please find code snippet in below link
i appreciate help.
i use following javascript (jquery) extension of bootstrap modal library apply effects animate.css modal show/hide events:
https://gist.github.com/jduhls/92f2c7fae92da3a95c5941024847ae87
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://rawgit.com/jduhls/92f2c7fae92da3a95c5941024847ae87/raw/d17e48713892332af0b2afb55d34331608c46759/bootstrap-modal-animate-css.js"></script> <div id="modal" class="modal animated" data-animate-css-hide="rollout" data-animate-css-show="rollin"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="modal-title"></div> </div> <div class="modal-body">hello world!</div> <div class="modal-footer"> <button type="button" class="btn btn-lg btn-default modal-submit" data-dismiss="modal" aria-hidden="true">close</button> </div> </div> </div> </div> <p> </p> <p><button class="btn btn-primary animated swing center-block" data-toggle="modal" data-target="#modal">open modal</button></p> <p> </p> <script src="https://gist.github.com/jduhls/92f2c7fae92da3a95c5941024847ae87.js"></script>
Comments
Post a Comment