Ventana modal con Response.Write

publicado por: Anonymous

Quiero mostrar una ventana modal que es la respuesta a un UPDATE a la BD de operación exitosa, estoy definiendo la ventana modal en un Response.Write pero no me muestra la ventana, ya cargue las librerías jquery, bootstrap pero aun así no me muestra nada

_x000D_

_x000D_

    Response.Write(" <div class='modal fade' id='modal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>" & __x000D_
" <div class='modal-dialog'>" & __x000D_
   " <div class='modal-content'>" & __x000D_
    " <div class='modal-header'>" & __x000D_
            " <button type='button'  data-dismiss='modal' aria-hidden='true'>x</button>" & __x000D_
         " <div class='modal-body'>" & __x000D_
            " <blockquote>" & __x000D_
                " <p style='text-align:justify;'>Registro exitoso<span id='error2'></span></p>" & __x000D_
            " </blockquote>	" & __x000D_
        " </div>" & __x000D_
        " <div class='modal-footer'>" & __x000D_
            " <a href='reporte_renov' data-dismiss='modal' class='btn btn-danger btnsalir'>Aceptar</a>" & __x000D_
        " </div>" & __x000D_
    " </div>" & __x000D_
" </div>" & __x000D_
"</div>")_x000D_
    

_x000D_

_x000D_

_x000D_

*cuando quito el class=”modal fade” si me muestra la ventana asi: ¿Me falta algo para que la muestre adecuadamente?
introducir la descripción de la imagen aquí

solución

Esto ocurre porque por defecto los modales en Bootstrap están escondidos (tienen display:none en la clase .modal). Así que no basta con escribir el modal en HTML, también hay que activarlo para que se muestre.

Cuando hayas escrito tu modal en el código, puedes mostrarlo programáticamente mediante el comando modal() en JavaScript:

$("#ID_DEL_MODAL_A_MOSTRAR").modal();

Así, cuando se reciba la confirmación de que el UPDATE se realizó correctamente en la base de datos y escribas el modal en la página, seguidamente debes abrirlo con $("#modal").modal() (porque el ID es “modal”) para que se muestre por pantalla.

Aquí tienes un ejemplo de cómo funciona. Pulsa en el botón para que el modal se abra con JavaScript

_x000D_

_x000D_

function abrirModal() {_x000D_
  $("#modal").modal(); _x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>_x000D_
_x000D_
<button onclick="abrirModal()">Abrir Modal</button>_x000D_
_x000D_
<div class='modal fade' id='modal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>_x000D_
  <div class='modal-dialog'>_x000D_
    <div class='modal-content'>_x000D_
      <div class='modal-header'>_x000D_
        <button type='button'  data-dismiss='modal' aria-hidden='true'>x</button>_x000D_
        <div class='modal-body'>_x000D_
          <blockquote>_x000D_
            <p style='text-align:justify;'>Registro exitoso<span id='error2'></span></p>_x000D_
          </blockquote>	_x000D_
        </div>_x000D_
        <div class='modal-footer'>_x000D_
          <a href='reporte_renov' data-dismiss='modal' class='btn btn-danger btnsalir'>Aceptar</a>_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *