Answers for "modal window"

open bootstrap modal with javascript

$("#myModal").modal()

modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

how to make popup modal in jquery with example

<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
  <p>Thanks for clicking. That felt good.</p>
  <a href="#" rel="modal:close">Close</a>
</div>

<!-- Link to open the modal -->
<p><a href="#ex1" rel="modal:open">Open Modal</a></p>

how to make popup modal in jquery with example

<!-- AJAX response must be wrapped in the modal's root class. -->
<div class="modal">
  <p>Second AJAX Example!</p>
</div>

how to make popup modal in jquery with example

$('#sub-modal').modal({
  closeExisting: false
});

como criar uma modal jquery

var modal_estilos = 'display: block;'
+'width: 85%; max-width: 600px;'
+'background: #fff; padding: 15px;'
+'border-radius: 5px;'
+'-webkit-box-shadow: 0px 6px 14px -2px rgba(0,0,0,0.75);'
+'-moz-box-shadow: 0px 6px 14px -2px rgba(0,0,0,0.75);'
+'box-shadow: 0px 6px 14px -2px rgba(0,0,0,0.75);'
+'position: fixed;'
+'top: 50%; left: 50%;'
+'transform: translate(-50%,-50%);'
+'z-index: 99999999; text-align: center';

var fundo_modal_estilos = 'top: 0; right: 0;'
+'bottom: 0; left: 0; position: fixed;'
+'background-color: rgba(0, 0, 0, 0.6); z-index: 99999999;'
+'display: none;';

var meu_modal = '<div id="fundo_modal" style="'+fundo_modal_estilos+'">'
+'<div id="meu_modal" style="'+modal_estilos+'">'
   +'<h5>Esqueceu sua senha?</h5><br />'
      +'<form>'
         +'<div class="row">'
            +'<div class="col-sm-6">'
               +'<div class="form-group">'
                  +'<input name="cpf_cnpj" class="form-control" type="tel" placeholder="CPF/CNPJ" />'
               +'</div>'
               +'<div class="form-group">'
                  +'<input name="email" style="max-width: 55%; float: left;" class="form-control" type="email" placeholder="Email" />'
                  +'<button style="float: left; margin-left: 15px;" type="submit" class="btn btn-secondary">Enviar</button>'
               +'</div>'
            +'</div>'
            +'<div class="col-sm-6" style="text-align: left;">'
               +'Qualquer coisa aqui nesta coluna'
            +'</div>'
         +'</div>'
      +'</form>'
   +'<button type="button" class="close" style="top: 5px; right: 10px; position: absolute; cursor: pointer;"><span>×</span></button>'
+'</div></div>';

$("body").append(meu_modal);

$("#fundo_modal, .close").click(function(){ $("#fundo_modal").hide(); });
$("#meu_modal").click(function(e){ e.stopPropagation(); });