AngularJS部分页面上的模态对话框

Question

我正在使用来自 AngularJs UI Bootstrap 的模态框，可以在这里了解其详细信息。

我想让模态框只显示在页面的特定部分（例如特定的DIV中），仅使其容器变黑而不是整个屏幕。

以下是示例，我希望模态框只显示在浅蓝色部分（id="chat"）：http://plnkr.co/edit/tEnmm7RDOiB6sag4ailo?p=preview

- Aviran Cohen

---

我不认为在不扩展指令的情况下可以完成它。 - Adrien

Answer 1

通常情况下，由于AngularJs UI Bootstrap创建的每个模态框都会发生在html body中，因此通常不可能实现。但是，总有方法可以解决问题 :)

免责声明: 以下内容属于一种hack方法，我强烈建议您创建自己的指令。

模态框组件提供了两个promise，一个称为“result”，另一个称为“opened”。在我们的情况下，我们将使用第二个promise来确定模态框何时打开并可见。从那里，我们可以将模态框附加到另一个div元素中，如下所示：

    var modalInstance = $modal.open({
        windowClass : 'uniqueClassName', //use to easily find the dom element
        templateUrl: 'modal.html',
        controller: ChatModalController
    });
    modalInstance.opened.then(function(){
      $timeout(function(){
        var modalDom = document.querySelector('.uniqueClassName'); // The modal
        var modalBackDom = document.querySelector('.modal-backdrop'); //The backdrop
        var chatDom = document.querySelector('#chat');

        chatDom.appendChild(modalDom); //Move modal & backdrop inside chat div
        chatDom.appendChild(modalBackDom);

      });
    })

为了适应新情况，我们还需要添加/修改一些类似于以下的CSS类：

  #chat {position:relative;}
  #chat .modal,
  #chat .modal-backdrop{
    position : absolute;
  }

最后，您可以在这里看到一个可工作的Plunker。

- Nicolas ABRIC