AngularJs Modal Dialog на части страницы

Question

Я использую Modal из AngularJs UI Bootstrap объяснена с here

Я хочу модальный показать на определенной части страницы (в определенной DIV для пример), - только чернение его контейнера, а не полного экрана.

Вот пример, я хочу, чтобы показать модальный только на части LightBlue (id="chat") http://plnkr.co/edit/tEnmm7RDOiB6sag4ailo?p=preview

Answer 1

Обычно это не возможно, как раз модальности созданных AngularJs UI Bootstrap которые случились с HTML тела. Это говорит о том, что всегда есть путь :)

Отказ от ответственности: следующее является видом взлома, и я настоятельно рекомендую вам создать свою собственную директиву.

модальный компонент выставляет два обещания один называется результатом, а другой называется открываемых. В нашем случае мы будем использовать второй, чтобы узнать, когда модаль открыт и видим. Оттуда мы можем добавить модальный к другому сНу элемента следующим образом:

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.