拖动时更改 uibModal 透明度

Question

我想让 $uibModal 模态在拖动时透明，停止拖动时不透明。

目前，我在可拖动停止事件和 mouseup() 方法上尝试了 jQuery fadeTo() and fadeIn() 方法。模态变得透明但不会变得不透明。

我该如何制作这个动画？ 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();
      });
    }
  };
}]);

Answer 1

您不需要附加到 mouseup 事件，只需在 dragging 事件结束后将不透明度重置为 100%。

指定模式 window 必须位于页面所有其他元素的前景中也可能有用，为此，只需设置属性 moveToTop至 true.

请看以下内容：

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>

希望对你有帮助，再见

Answer 2

还有 opacity 选项来定义 jQuery 可拖动时的不透明度：

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

拖动时更改 uibModal 透明度

Change uibModal transparency when dragging

javascript

jquery

angularjs

ui.bootstrap