我正在使用来自 AngularJs UI Bootstrap 的模态框,可以在这里了解其详细信息。
我想让模态框只显示在页面的特定部分(例如特定的DIV中),仅使其容器变黑而不是整个屏幕。
以下是示例,我希望模态框只显示在浅蓝色部分(id="chat"
):http://plnkr.co/edit/tEnmm7RDOiB6sag4ailo?p=preview
我正在使用来自 AngularJs UI Bootstrap 的模态框,可以在这里了解其详细信息。
我想让模态框只显示在页面的特定部分(例如特定的DIV中),仅使其容器变黑而不是整个屏幕。
以下是示例,我希望模态框只显示在浅蓝色部分(id="chat"
):http://plnkr.co/edit/tEnmm7RDOiB6sag4ailo?p=preview
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);
});
})
#chat {position:relative;}
#chat .modal,
#chat .modal-backdrop{
position : absolute;
}
最后,您可以在这里看到一个可工作的Plunker。