1

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

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

*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í

2 respuestas 2

2

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

function abrirModal() {
  $("#modal").modal(); 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button onclick="abrirModal()">Abrir Modal</button>

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

5
  • Por cierto, en el códido de la pregunta falta un último </div> (que yo sí añadí en el ejemplo de la respuesta)
    – Alvaro Montoro
    el 8 mar. 2016 a las 3:48
  • lo que sucede es que no tengo ningun boton, la ventana modal se deberia disparar automaticamente cuando la operación sea exitosa ese es el pequeño problema
    – Drago25
    el 8 mar. 2016 a las 15:08
  • 1
    @Drago25 Comprendo que no tienes botón, pero el código es el mismo: una vez que escribas el modal en la página, simplemente tienes que hacer $("#modal").modal(); (sin necesidad de botón ni nada, el botón era sólo para mostrar en el ejemplo)
    – Alvaro Montoro
    el 8 mar. 2016 a las 15:09
  • 1
    gracias por la ayuda no sabia donde colocar $("#modal").modal(); ya que estoy en la pagina del codebehind
    – Drago25
    el 8 mar. 2016 a las 15:18
  • Me alegra que te sirviera
    – Alvaro Montoro
    el 8 mar. 2016 a las 15:45
2

Una alternativa, si sólo quieres mostrar un mensaje de Registro Exitoso, puedes usar esta librería AlertifyJS, la puedes descargar acá: Alertify. y Mostrar el mensaje con un simple alert (puedes usar temas de Bootstrap también):

alertify.alert('Titulo','Registro Exitoso');

Se verá así: introducir la descripción de la imagen aquí

Bueno si lo quieres llamarlo en el codeBehind, lo llamas con RegisterStartupScript:

Dim _str As String
_str = "alertify.alert('" + titulo + "', '" + mensaje + "');"
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "scriptID", _str, True)

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.