AngularJS modal allow interaction with background

Question

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

Answer 1

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

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

Answer 2

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>