Modal window with Response.Write

1

I want to show a modal window that is the answer to an UPDATE to the BD of successful operation, I am defining the modal window in Response.Write but it does not show me the window, I already load the jquery libraries, bootstrap but still not It shows me nothing

    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>")
    

* when I remove the class="modal fade" if it shows me the window like this: Am I missing something to show it properly?

    
asked by Drago25 08.03.2016 в 00:09
source

2 answers

1

This happens because by default the manners in Bootstrap are hidden (they have display:none in class .modal ). So it is not enough to write the modal in HTML, you also have to activate it to be displayed.

When you have written your modal in the code, you can show it programmatically by using the modal() command in JavaScript:

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

So, when you receive confirmation that the UPDATE was correctly made in the database and write the modal on the page, then you must open it with $("#modal").modal() (because the ID is "modal") to be displayed by screen.

Here is an example of how it works. Click on the button to open the modal with 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>
    
answered by 08.03.2016 / 04:43
source
1

An alternative, if you only want to show a Successful Registration message, you can use this library AlertifyJS , you can download it here: Alertify . and Show the message with a simple alert (you can use themes of Bootstrap as well):

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

It will look like this:

Well if you want to call it in the codeBehind, you call it with RegisterStartupScript :

Dim _str As String
_str = "alertify.alert('" + titulo + "', '" + mensaje + "');"
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "scriptID", _str, True)
    
answered by 08.03.2016 в 18:20