uibModal disable backdrop completely and allow background clicking

Question

I have a modal window that is draggable. I want to disable the backdrop completely. I know that the uibModal has a backdrop property that I can set true/false or static - but that is not enough for me, I want the html content from the background still be clickable for example Google Sheet Help modal window - you can open it, drag it and still work in the background. How can I disable the backdrop completely and make the content from the background clickable with the modal open? Is this possible with the uibModal or should I just create a modal window in plain javascript/iframe?

I can make the background clickable with this CSS:

.modal {
   pointer-events: none;}
.modal-backdrop {
   display: none;}

The problem with this is that it kills the draggable functionality because you can no longer click on the modal(only background is clickable).

Answer 1

I resolved my problem with jQuery UI

$(document).ready(function(){
    $("#div-name").draggable({ containment: "body", scroll: false, handle:'#header' });
})

As you guys can see I set my ID for the div that I want to be draggable and I also set a containment for the body of the page so people can't move my div out of the view(body) and turned off scrolling. After that I set a handle - this is where you set the draggable part of your div(if you want the whole div to be draggable just remove the handle option) - I set the #header as my handle(top menu bar) - this way people can click inside the draggable div without accidentally moving it. If you want this to work for you, all you need is jQuery and jQueryUI.

This works like a charm and I am very happy!