Cacher is the code snippet organizer for pro developers

<!-- button -->
<a class="nav-btn" data-action="dialog-open" data-target="auth-login">TPopupest</a>


<!-- modal -->
<div class="dialog-stage" data-dialog-type="auth-login" style="display: block;">
  <div class="dialog-body">
        <a data-action="close-dialog">close</a>
  </div>
</div>


<!-- js -->

  $('[data-action=dialog-open]').on('click',function(event){
    event.preventDefault();
    var target = $(this).attr('data-target');
    var selector = '[data-dialog-type=' + target + ']';
    $(selector).show();
  });
  $('[data-action="close-dialog"]').on('click',function(e){
    e.preventDefault();
    $(this).parents('.dialog-stage').hide();
  });
  
  <!-- sample css -->
  
   .dialog-stage {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }

 /* Modal Content/Box */
 .dialog-body {
     background-color: #fefefe;
     margin: 15% auto; /* 15% from the top and centered */
     padding: 20px;
     border: 1px solid #888;
     width: 60%; /* Could be more or less, depending on screen size */
     text-align: center;
 }