Criar um modal apenas com jQuery/JavaScript

Question

Tenho uma view RecuperaçãoSenha, onde a mesma irá trazer a seguinte mensagem:

Enviaremos informações de recuperação de senha para o e-mail abaixo:

XPTO@gmail.com

Onde essa view já será aberta com o e-mail de acordo com o ID do usuário. Porém gostaria de simplificar para um modal que iria fazer a mesma consulta através de um JSON.

Minha dúvida é como criar esse tipo de modal.

Exemplo:

Answer 1

Modal 100% em jQuery aproveitando propriedades e grid do Bootstrap 4:

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>&times;</span></button>'
+'</div></div>';

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<input type="button" onclick="$('#fundo_modal').fadeIn()" value="Abrir modal" />

ExecutarEsconder resultado

Expandir trecho de código

Página toda

Fechar

Answer 2

É possível fazer facilmente usando flexbox e javascript puro, observe o exemplo...

let open = document.getElementById('openModal');
let close = document.getElementById('close');
let fade = document.getElementById('fade');
let cntModal = document.getElementById('ctnModal');

open.onclick = function() {fade.style.display = "flex"}

close.onclick = function() {fade.style.display = "none"}

fade.onclick = function() {fade.style.display = "none"}

cntModal.onclick = function(event) {event.stopPropagation()}

body {
  font-family: Arial;
  box-sizing: border-box;
  margin:0;
}
#fade {
  position: absolute;
  top: 0;
  display: none;
  height: 100vh;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 1;
  background: rgba(0,0,0,0.7);
}
#ctnModal {
  width: 90%;
  top: 0;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
#fecharModal {
  display: flex;
  justify-content: flex-end;
  padding: 7px;
}
#close {
  cursor: pointer;
}
#tituloModal {
  display: flex;
  justify-content: center;
  padding: 7px;
  color: #666;
  font-size: 18px;
}
form {
  width: 45%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0px 10px 20px;
}
form input[name="cpfCnpj"] {
  width: 100%;
  margin-bottom: 15px;
  padding: 10px 10px;
}
form div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
form input[name="email"] {
  padding: 10px 10px;
}
form div input[name="submit"]{
  padding: 4 20px;
  background: white;
  border: 1px #aaa solid;;
}

<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>

<div id="fade">
  <div id="ctnModal">

    <span id="fecharModal"><div id="close" class="fa fa-close"></div></span>
    <div id="tituloModal">Esqueceu sua senha?</div>

    <form>
      <input type="text" name="cpfCnpj" placeholder=" CPF/CNPJ">
      <div>
        <input type="email" name="email" placeholder="E-MAIL">
        <input type="submit" name="submit" value="enviar">
      </div>
    </form>

  </div>
</div>

<a href="#" id="openModal" >Esqueci minha senha</a>

ExecutarEsconder resultado

Expandir trecho de código