Change uibModal transparency when dragging

Question

Change uibModal transparency when dragging

518 Views Asked by srgbnd At 25 November 2017 at 21:35

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();
      });
    }
  };
}]);

Original Q&A

There are 2 best solutions below

srgbnd On 27 November 2017 at 11:04

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

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

**Alessandro** · Accepted Answer · 2017-11-27T10:13:19.737000

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.

Change uibModal transparency when dragging

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in ANGULARJS

Related Questions in UI.BOOTSTRAP

Trending Questions

Popular # Hahtags

Popular Questions