3

我正在使用从这里解释的AngularJs UI Bootstrap的模态

我希望模态显示在页面的特定部分（例如在特定的 DIV 中），仅使其容器变黑而不是全屏。

这是示例，我希望模态仅显示在浅蓝色部分 ( id="chat") http://plnkr.co/edit/tEnmm7RDOiB6sag4ailo?p=preview

4

1 回答 1

4

通常这是不可能的，因为 AngularJs UI Bootstrap 创建的每个模态都发生在 html 正文中。话虽如此，总有办法:)

免责声明：以下是一种 hack，我强烈建议您创建自己的指令。

模态组件公开了两个 Promise，一个叫做result，另一个叫做opens。在我们的例子中，我们将使用第二个来了解模式何时打开和可见。从那里我们可以将模态附加到另一个 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 。

于 2013-09-24T19:42:57.293 回答