Overlay Signup Form css

Amazing Overlay Form with CSS HTML and JS

Overlay Signup Form / Overlay Form with CSS HTML and JS / Formulario con Overlay / Formulario con Overlay con CSS HTML y JQUERY

BY  Chris Deacy


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


HTML

<main role="main">
 <button class="popup-trigger btn" id="popup-trigger"><span>Signup Now<i class="fa fa-plus-square-o"></i></span></button>
</main>
<div class="overlay" id="overlay">
 <div class="overlay-background" id="overlay-background"></div>
 <div class="overlay-content" id="overlay-content">
 <div class="fa fa-times fa-lg overlay-close" id="overlay-close"></div>
 <h1 class="main-heading">Signup Now</h1>
 <h3 class="blurb">Creating an account is free &mdash;</h3><span class="blurb-tagline">and won't take longer than a couple of seconds.</span>
 <form class="signup-form" method="post" action="#" novalidate="novalidate">
 <label for="signup-name">Full Name</label>
 <input id="signup-name" type="text" name="name" autocomplete="off"/>
 <label for="signup-email">Email Address</label>
 <input id="signup-email" type="email" name="email" autocomplete="off"/>
 <label for="signup-pw">Password</label>
 <input id="signup-pw" type="password" name="pw" autocomplete="off"/>
 <label for="signup-cpw">Confirm Password</label>
 <input id="signup-cpw" type="password" name="cpw" autocomplete="off"/>
 <button class="btn btn-outline submit-btn"><span>signup</span></button>
 </form>
 </div>
</div>

FONT AWESOME CDN

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
CSS

*{margin:0;padding:0;color:inherit;box-sizing:inherit}
:focus{outline:0}
html{box-sizing:border-box}
body{background-color:#ecf0f1;font-family:'Open Sans',sans-serif;overflow:hidden}
h1,h2,h3,h4,h5{font-weight:400}
form,input,label{display:block}
.animate,.btn,.btn span,.overlay .overlay-content,.overlay .overlay-content .overlay-close,.overlay .overlay-content .signup-form input{-webkit-transition:all .3s;transition:all .3s}
main{display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:10}
.main-heading{line-height:100%;font-weight:600;font-size:28px;text-transform:uppercase}
.btn{display:block;height:50px;line-height:50px;border:0;text-align:center;cursor:pointer;border-radius:5px}
.btn span{font-weight:600;font-size:14px;text-transform:uppercase}
.btn span .fa{margin-left:8px;font-size:18px;vertical-align:middle}
.btn:not(.btn-outline){background-color:#fff}
.btn:not(.btn-outline) span{color:#666}
.btn:not(.btn-outline):hover{background-color:#f7f7f7}
.btn.btn-outline{background-color:transparent;border:1px solid #fff}
.btn.btn-outline span{color:#fff}
.btn.btn-outline:hover{background-color:#fff}
.btn.btn-outline:hover span{color:#666}
.popup-trigger{width:175px;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:0 0 25px 0 rgba(0,0,0,.05)}
.overlay{width:100%;height:100%;overflow:auto;float:left;position:fixed;top:0;left:0;z-index:5;opacity:0;-webkit-transform:translateY(200px);transform:translateY(200px);-webkit-transition:opacity .5s,z-index 0s .5s,-webkit-transform .5s;transition:opacity .5s,z-index 0s .5s,-webkit-transform .5s;transition:opacity .5s,transform .5s,z-index 0s .5s;transition:opacity .5s,transform .5s,z-index 0s .5s,-webkit-transform .5s}
.overlay .overlay-background{background-color:rgba(44,62,80,.8);width:100%;height:100%;position:absolute;top:0;left:0;z-index:5}
.overlay .overlay-content{width:100%;max-width:530px;margin:100px auto 0;padding:0 15px;color:#fff;position:relative;z-index:10}
.overlay .overlay-content .overlay-close{display:block;font-size:35px;cursor:pointer;position:absolute;top:0;right:15px}
.overlay .overlay-content .overlay-close:hover{opacity:.8}
.overlay .overlay-content .blurb{margin-top:35px;line-height:100%;font-weight:600;font-size:18px}
.overlay .overlay-content .blurb-tagline{display:block;margin-top:10px;line-height:100%;font-size:14px}
.overlay .overlay-content .signup-form{margin-top:35px}
.overlay .overlay-content .signup-form label{line-height:100%;margin-bottom:5px;font-size:14px}
.overlay .overlay-content .signup-form input{background-color:transparent;width:100%;height:30px;margin-bottom:20px;padding:0 8px;border:1px solid rgba(254,254,254,.3);border-radius:5px}
.overlay .overlay-content .signup-form input:focus,.overlay .overlay-content .signup-form input:hover{border-color:#fff}
.overlay .overlay-content .signup-form .submit-btn{width:150px}
.overlay.open{z-index:15;opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity .5s,z-index 0s,-webkit-transform .5s;transition:opacity .5s,z-index 0s,-webkit-transform .5s;transition:opacity .5s,transform .5s,z-index 0s;transition:opacity .5s,transform .5s,z-index 0s,-webkit-transform .5s}
.overlay.short .overlay-content{margin:30px auto}
@media (max-width:600px){.overlay .overlay-content{margin:25px auto}}

JQUERY CDN

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

JS

(function () {
  var calculateHeight;

  calculateHeight = function () {
    var $content, contentHeight, finalHeight, windowHeight;
    $content = $('#overlay-content');
    contentHeight = parseInt($content.height()) + parseInt($content.css('margin-top')) + parseInt($content.css('margin-bottom'));
    windowHeight = $(window).height();
    finalHeight = windowHeight > contentHeight ? windowHeight : contentHeight;
    return finalHeight;
  };

  $(document).ready(function () {
    $(window).resize(function () {
      if ($(window).height() < 560 && $(window).width() > 600) {
        $('#overlay').addClass('short');
      } else {
        $('#overlay').removeClass('short');
      }
      return $('#overlay-background').height(calculateHeight());
    });
    $(window).trigger('resize');

    // open
    $('#popup-trigger').click(function () {
      return $('#overlay').addClass('open').find('.signup-form input:first').select();
    });

    // close
    return $('#overlay-background,#overlay-close').click(function () {
      return $('#overlay').removeClass('open');
    });
  });

}).call(this);
¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones