Estoy trabajando en una aplicación MVC y también he creado un sistema emergente. La estructura de la ventana emergente es como se muestra a continuación

 <div class="main-content" id="main-content"> <main role="main" class=""> @RenderBody() </main> </div> <div class="notifications-container"></div> <!–– You can ignore ––> <div class="overlay-modal" id="overlay-modal"></div> <!–– Overlay on the screen (To dark a bit and adds blur) ––> <div class="modal" id="modal"> <div> <!–– Pop-up content (Usually Html) ––> <button class="modal-close-btn" id="close-btn"><i class="fa fa-times" title="Close"></i></button> <!–– Dynamically I'm appending html in here to show the pop-up ––> </div> </div>

Ahora, el problema con este enfoque es que mantiene el html emergente. Por ejemplo, si tengo que mostrar algo de html como ventana emergente, tengo que hacer algo como a continuación.

1. Cree el HTML (UI) para mostrar en la ventana emergente.
2. Ocúltelo configurando la display en none .
3. Cuando se active la ventana emergente, clone el html oculto y agréguelo al div #modal . Cuando se cierra la ventana emergente, elimino el elemento adjunto de #modal .
4. Cada vez que se dispara, repitiendo el 3er paso.

Me resulta un poco difícil mantener HTML en este enfoque. Cuando aparezca la ventana emergente, habrá un html duplicado en el DOM. Tuve que clonar los elementos ocultos porque si no lo hago, perderé la interfaz de usuario que necesito mostrar si la quiero por segunda vez (ya que la eliminaría del DOM y la agregaría a #modal ).

Sugiera cualquier técnica para mejorar este enfoque o una mejor solución en conjunto. Por favor comente si tiene alguna pregunta. Gracias por adelantado.