<a href="#" class="login-toggle1">open modal</a>

<div class="block-customer-login">
  <div class="login_header">
    header
  </div>
  <div class="login_body">
    body
  </div>
  <div class="login_footer">footer</div>
</div>

body {
  background: green;
  padding: 20px;
}
.login-toggle1{color:green; text-transform:uppercase; text-decoration:none; padding:7px 15px; background-color:#ffffff; border-radius:7px;}
.block-customer-login {
  display: none;
  position:fixed;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  background: #fff;
  width: 320px;
  height: 320px;
  text-align: center;
  box-sizing:border-box;
  box-shadow:0 0 20px rgba(0,0,0,.2);
  
 
}
.block-customer-login.active{display: block;}

.login_header, .login_footer {
  color:white;
  background: #333;
  line-height: 50px;
  text-align: center;
  position: relative;
  height:50px;
  box-sizing:border-box;

}
.login_body{height:220px; display:flex; align-items:center; justify-content:center;}

jQuery(".login-toggle1").on("click", function() {
    jQuery(".block-customer-login").toggleClass("active");
});

jQuery(document).click(function(event) {
    var container = jQuery(".block-customer-login, .login-toggle1");
    if (
        !container.is(event.target) &&
        !container.has(event.target).length
    ) {
        container.removeClass("active");
    }
});