jquery window modal example
Example 1: jquery modal popup
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<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.
<div id="ex1" class="modal">
<p>Thanks for clicking. That felt good.</p>
<a href="#" rel="modal:close">Close</a>
</div>
<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(); });