javascript - Bootstrap Modal Fade Out Animation -


i've added basic animation closing of modal box, zooms out element:

$(function(){      var $modal = $('.modal');     $modal.on('hide', function () {          if (!$modal.isanimating) {           // $('.modal-backdrop.in').fadeto(250, 0);        // fade out backdrop              var $target = $('#zoomout-target');             var pos = $target.offset();             pos.top  -= $(window).scrolltop();             pos.left -= $(window).scrollleft();              $modal.css({top: pos.top, left: pos.left, transform: 'scale(0.1, 0.1)', opacity: 0});              $modal.isanimating = true;             settimeout(function(){                 $modal.modal('hide');                 $modal.isanimating = false;             }, 750);              return false;         }          $modal.css({top: '', left: '', transform: '', opacity: ''});     }); });

the problem backdrop "hides" target element modal box zooms out.

so added commented line above $('.modal-backdrop.in').fadeto(250, 0); fades out backdrop nicely, looks i'm missing because page freezes.

it seems backdrop still on, capturing of mouse events, etc, though transparent. backdrop not visible, making page unusable.

how can rid of backdrop @ end of fadeto animation?

edit:

i noticed problem .modal-backdrop , .modal-scrollable overlays, snippet instead of offensive 1 resolves issue, there's has cleaner solution imo:

$('.modal-backdrop.in').fadeout(600, function(){     $('body').removeclass('modal-open');     $('.modal-backdrop').hide();     $('.modal-scrollable').hide(); });     // fade out backdrop

i'm using bootstrap 2.3.2 , bootstrap modal 2.2.5

tia


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more