modal window jquery code example

Example 1: jquery modal popup

<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
 
Embed modal HTML in document
Create a link with rel="modal:open" and set the href attribute to the modal's DOM id.
<!-- 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>

Example 2: 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(); });