twitter bootstrap - ng2 - Diálogo modal de AngularJs en una parte de la página

ng2 bootstrap modal angular 5

Question

Estoy usando un Modal de AngularJs UI Bootstrap explicado desde aquí

Quiero que el modal se muestre en una parte particular de la página (en un DIV específico, por ejemplo), solo ennegreciendo su contenedor y no la pantalla completa.

Aquí está el ejemplo, quiero que el modal se muestre solo en la parte azul claro ( id="chat" ) http://plnkr.co/edit/tEnmm7RDOiB6sag4ailo?p=preview

Answer 1

Normalmente no es posible ya que todos los modales creados por AngularJs UI Bootstrap se pasan al cuerpo html. Dicho esto, siempre hay una manera :)

Descargo de responsabilidad : el siguiente es un truco y te recomendaré que crees tu propia directiva.

El componente modal expone dos promesas, una llamada resultado y la otra llamada abierta . En nuestro caso, utilizaremos el segundo para saber cuándo el modal está abierto y es visible. Desde allí podemos agregar el modal a otro elemento div de la siguiente manera:

 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);
});
})

Para acomodar el nuevo escenario también deberíamos agregar / modificar algunas clases de CSS así:

 #chat {position:relative;}
#chat .modal,
#chat .modal-backdrop{
position : absolute;
}

Finalmente puedes ver un Plunker que funciona aquí .