gpt4 book ai didi

twitter-bootstrap - 部分页面上的 AngularJs 模态对话框

转载 作者:行者123 更新时间:2023-12-04 02:45:07 25 4
gpt4 key购买 nike

我正在使用 AngularJs UI Bootstrap 中的 Modal,解释自 here

我希望模式显示在页面的特定部分(例如在特定的 DIV 中),仅将其容器变黑而不是全屏。

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

最佳答案

通常这是不可能的,因为 AngularJs UI Bootstrap 创建的每个模态都发生在 html 主体中。话虽这么说,总有办法:)

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

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

关于twitter-bootstrap - 部分页面上的 AngularJs 模态对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18984583/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com