Popup login form materialize css

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container center">
  <a href="#login" class="btn btn-large teal modal-trigger">Login</a>
</div>

<div id="login" class="modal ">
  <h5 class="modal-close">&#10005;</h5>
  <div class="modal-content center">
    <h4>Login Form</h4>
    <br>

    <form action="#">

      <div class="input-field">
        <i class="material-icons prefix">person</i>
        <input type="text" id="name">
        <label for="name">Username</label>
      </div>
      <br>

      <div class="input-field">
        <i class="material-icons prefix">lock</i>
        <input type="password" id="pass">
        <label for="pass">Password</label>
      </div>
      <br>

      <div class="left" style="margin-left:20px;">
        <input type="checkbox" id="check">
        <label for="check">Remember Me</label>
      </div>
      <br>
      
      <input type="submit" value="Login" class="btn btn-large">
      
    </form>
  </div>
</div>

popup-login-form-materialize-css.markdown

Popup login form materialize css

This is a responsive mobile first popup modal login form using materialize css,

A Pen by Web Zone on CodePen.

License.

script.js

$(document).ready(function(){
  		$('.modal').modal();
 });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

style.css

body{
  background:#EF9A9A;
}

a.btn{
  margin-top: 30%;
}
.modal{
 max-height:100%;
 overflow:hidden;
}

input[type="submit"]{
  width: 100%;
  margin-top: 50px;
}
.modal-close{
  position: absolute;
  top:10px;
  right:10px;
  padding:0;
  margin:0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />