Change uibModal transparency when dragging

Question

I want to make $uibModal modal transparent when drugging and opaque when stop dragging.

For now, I tried jQuery fadeTo() and fadeIn() methods on the draggable stop event and the mouseup() method. The modal becomes transparent but doesn't become opaque.

How can I do this animation? The plunker

.directive('uibModalWindow', [function() {
  return {
    link: function(scope, element, attr) {
      console.log('element', element);
      var dialog = element.find('.modal-dialog');
      dialog.draggable({
        handle: '.modal-header',
        drag: function() {
          $(this).fadeTo(1000, 0.8);
        },
        stop: function() {
          $(this).fadeTo(1000, 1);
          //$(this).fadeIn();
        }
      });
      $('.modal-header').mouseup(function() {
        dialog.fadeTo(1000, 1);
        //dialog.fadeIn();
      });
    }
  };
}]);

score 2 · Accepted Answer · answered Nov 27 '17 at 10:13

You do not need to attach to the mouseup event, just reset the opacity to 100% when the dragging event is over.

May also be useful to specify that the modal window must be in the foreground of all the other elements of the page, to do this, simply set the property moveToTop to true.

See following please:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      keyboard: false,
   backdrop: "static",
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

})
.directive('uibModalWindow', ['$document', function($document) {
  return {
    link: function(scope, element, attr) {
      var dialog = element.find('.modal-dialog');
      dialog.draggable({
        handle: '.modal-header',
        moveToTop: true,
        drag: function() {
          $(this).fadeTo(10, 0.5);
        },
        stop: function() {
          $(this).fadeTo(10, 1);
        }
      });
    }
  };
}]);


angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">

  <head>
    <link data-require="jquery-ui@*" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="jquery-ui@*" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    
    <style>
      .modal-backdrop {
        display: none;
      }
    </style>
  </head>

  <body>
    <div ng-controller="ModalDemoCtrl">
      <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">Datepicker in modal</h3>
        </div>
        <div class="modal-body">
            <p class="input-group">
              <input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" datepicker-append-to-body="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="status.opened = true"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
      <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
      <h2>
        <pre>
        This text will be visible
        when the modal is dragging.
        Then will disappear when you stop to drag.
        </pre>
      </h2>
    </div>
  </body>

</html>

I hope it helps you, bye.

score 0 · Answer 2 · answered Nov 27 '17 at 11:04

0

There is also opacity option to define opacity for jQuery draggable while being dragged:

  dialog.draggable({
    handle: '.modal-header',
    opacity: 0.5
  });

answered Nov 27 '17 at 11:04

srgbnd

5,404
9
44
80

Change uibModal transparency when dragging

2 Answers2