AngularJS modal allow interaction with background

问题:

I need to allow users to drag and drop elements from the modal to the background.

This is my current modal, it works ok but does not allow me to interact with background elements:

 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;
        },
    }
  });

回答1:

What you need it's actually a popup instead of a modal.

However, if you need a quick workaround, you could add a div element inside your HTML to append the modal to it. You also need somehow to minimise the top modal window. Maybe it's not the best solution, but it works.

Just set the following options parameters when opening the modal:

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

In the CSS file, you could minimise the width of the top-window of the modal:

.windowTopClass {

    width:0px;
}

Also, in HTML file add the div where you can append your modal to:

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

回答2:

It's just a div element that prevents you to click on other elements. You can hide it:

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