modal materialize

In this example below you will see how to do a modal materialize with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©
  • HTML
  • CSS
  • JavaScript
     <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#m-signup">Modal</a>

  <!-- Modal Structure -->
  <div id="m-signup" class="modal modal-sign">
    <div class="modal-content">
      <h4 class="blue-text darken-3">Sign In</h4>
      <form class="col s12">
        <div class="row">
        <div class="input-field col s12">
          <select>
            <option value="brand">Brand</option>
            <option value="manufacturer">Manufacturer</option>
            <option value="supplier">Material supplier</option>
          </select>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="email" type="email" class="validate">
            <label for="email">Email</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
          </div>
        </div>
        <div class="row">
          <div class="col s6">
        <input class="with-gap" name="group1" type="radio" id="test3"  />
      <label for="test3">Remember me</label>
          </div>
          <div class="col s6">
        <button class="btn-large waves-effect waves-light right" type="submit" name="action">Sign In</button>
          </div>
        </div>
      </form>
    
    <div class="or">
      <span>
        OR
      </span>
    </div>
    <div class="modal-footer">
      <a class="btn-large waves-effect waves-light soc-icon blue darken-3"><i class="material-icons left">cloud</i>sign up with facebook</a>
      <a class="btn-large waves-effect waves-light soc-icon red darken-1"><i class="material-icons left">cloud</i>sign up with google</a>
    </div>
      </div><!-- END modal-content -->
    <div class="transparent-block"></div>
    <div class="member">
      <p class="center-align">Already a member? 
        <a href="#" class="red-text darken-1">Register</a>
      </p>
    </div>
    
  </div><!-- END #m-signup -->

/*Downloaded from https://www.codeseek.co/DM_Daria/modal-materialize-JyJqVK */
    .modal-sign {
  width: 400px;
  background: #fff;
  border: none;
  box-shadow: none;
  max-height: 100%; 
}

.modal h4 {
  margin-bottom: 3rem;
}
.modal-content {
  -webkit-box-shadow: 0 0 3px #ddd;
        box-shadow: 0 0 3px #ddd;
  border:1px solid #ddd;
}
.modal .modal-footer {
  height: 130px;
  padding: 4px 0;
}
.soc-icon {
  width: 100%;
}
.or {
  width: 100%;
  height: 20px; 
  border-bottom: 5px solid #ddd; 
  text-align: center;
  margin: 30px 0;
}
.or > span {
  font-size: 20px; 
  background-color: #fff; 
  padding: 0 10px;
  color: #ddd;
}
.member {
  background: #ddd;
  color: #999999;
  padding: 2px;
}
.transparent-block {
  width: 100%;
  height: 10px;
  background:rgba(0, 0, 0, .1);
}
.modal-overlay {
  opacity: .1!important;
}
.input-field {
  margin-top: 0;
}
input:not([type]), input[type=text], input[type=password], input[type=email],
.select-wrapper input.select-dropdown {
  height: 2.5rem;
  margin: 0;
}


/*Downloaded from https://www.codeseek.co/DM_Daria/modal-materialize-JyJqVK */
    $(document).ready(function(){
    $('.modal').modal();
  });
$(document).ready(function() {
    $('select').material_select();
  });

Comments