AngularJS 模态允许与背景交互

Question

我需要允许用户将元素从模式拖放到背景中。

这是我当前的模式，它工作正常但不允许我与背景元素交互：

 var asideInstance = $aside.open({
    templateUrl: '/static/calendr/html/aside.html',
    backdrop: false,
    controller: function($scope, $modalInstance, events) {
      $scope.events = events;
      $scope.ok = function(e) {
        $modalInstance.close();
        e.stopPropagation();
      };
      $scope.cancel = function(e) {
        $modalInstance.dismiss();
        e.stopPropagation();
      };
    },
    placement: 'right',
    size: 'lg',
    resolve:{
        events: function() {
          return $scope.events;
        },
    }
  });

Answer 1

它只是一个 div 元素，阻止您点击其他元素。你可以隐藏它：

.aside-backdrop.am-fade {
    display: none;
}

Answer 2

您需要的实际上是弹出窗口而不是模态窗口。

但是，如果您需要快速解决方法，您可以在 HTML 中添加一个 div 元素以将模式附加到它。您还需要以某种方式最小化顶部模态 window。也许这不是最好的解决方案，但它确实有效。

打开模态时设置如下选项参数即可：

...
windowTopClass: 'windowTopClass',
appendTo: $document.find('.module-container'),
backdrop: false,
...

在 CSS 文件中，您可以最小化模态框顶部 window 的宽度：

.windowTopClass {

    width:0px;
}

此外，在 HTML 文件中添加 div，您可以在其中将模态附加到：

<!--This div is used to append the module panel to it -->
<div class="module-container">
</div>

AngularJS 模态允许与背景交互

AngularJS modal allow interaction with background

javascript

modal-dialog

twitter-bootstrap

angularjs