AngularJs模態對話框頁面

Question

的一部分，我使用的是莫代爾從AngularJs UI引導從here

解釋我想要的模式顯示在頁面的特定部分（在特定DIV例如）， 只會變黑其容器，而不是全屏。

這裏的例子，我想模態顯示僅在lightblue部分（id="chat"） http://plnkr.co/edit/tEnmm7RDOiB6sag4ailo?p=preview

Answer 1

通常由AngularJs UI引導創建的每個模態都發生在HTML正文這是不可能的。這就是說總有一種方法:)

免責聲明：以下是一種黑客，我強烈建議您創建自己的指令。

莫代爾成分暴露了兩個承諾，一個叫結果，另一個叫打開。在我們的例子中，我們將使用第二個來了解何時打開和可見模態。從那裏，我們可以將模式追加到另一個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。