Basic Modal Example
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Bottom Sheet Modal
<!-- Modal Trigger -->
<button type="button" class="waves-effect waves-light btn btn-default modal-trigger" href="#modal1">Click me</button>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4 class="text-center">Modal Header</h4>
<div class="container-fluid">
<ul class="collection">
<li class="collection-item avatar">
<img src="http://0.gravatar.com/avatar/60efa32c26a19f3ed2e42798afb705ba?s=100&d=mm&r=g" alt="" class="circle">
<span class="title">Title</span>
<p>First Line
<br> Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle red">play_arrow</i>
<span class="title">Title</span>
<p>First Line
<br> Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<a href="#!" data-dismiss="modal1" class="btn btn-danger modal-action modal-close">Close</a>
</div>
</div>
Initialization
Before you can use Bottom Sheet Modal , you have to initialize it in your project by using code below.
<script>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
Modal Login
<!-- Button -->
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#modalLogin">Click me</button>
<!-- Modal -->
<div class="modal fade" id="modalLogin" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header text-center">
<h4><i class="fa fa-user"></i> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<div class="row">
<form class="col-md-12">
<div class="row">
<div class="input-field">
<i class="material-icons prefix">email</i>
<input id="icon_email" type="tel" class="validate">
<label for="icon_email">Your email</label>
</div>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary waves-effect waves-light">Login</button>
</div>
</div>
</form>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal">X</button>
<div class="options">
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
<!--/.Footer-->
</div>
<!-- /.Modal content-->
</div>
</div>
<!-- Modal -->
Modal Register
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal-3">Click me</button>
<!-- Modal -->
<div class="modal fade" id="myModal-3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header text-center">
<h4><i class="fa fa-user"></i> Register with:</h4>
<a class="btn-floating btn-large fb-bg waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-floating btn-large tw-bg waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-floating btn-large gplus-bg waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-floating btn-large li-bg waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-floating btn-large git-bg waves-effect waves-light"><i class="fa fa-github"> </i></a>
</div>
<!--/.Header-->
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!--Form-->
<form>
<h4 class="text-center">or:</h4>
<div class="input-field">
<i class="material-icons prefix">email</i>
<input id="icon_email" type="tel" class="validate">
<label for="icon_email">Your email</label>
</div>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input id="password-rep" type="password" class="validate">
<label for="password-rep">Repeat password</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary btn-lg waves-effect waves-light">Sign up</button>
<div class="subscription-checkbox">
<form action="#">
<input type="checkbox" id="test6" />
<label for="test6">
<p>Subscribe me to the Newsletter</p>
</label>
</form>
</div>
</div>
</form>
<!--/.Form-->
</div>
</div>
</div>
<!--/.Body-->
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal">X</button>
<div class="options">
<p>Already have an account? <a href="#">Login</a></p>
</div>
</div>
<!--/.Footer-->
</div>
</div>
</div>
<!--/.Modal-->
Subscription form
Open Modal
<!--Modal: subscription form-->
<!--Button-->
<a href="#" class="btn btn-primary btn-lg waves-effect waves-light" data-toggle="modal" data-target="#hp-newsletter">Open Modal</a>
<!-- Modal -->
<div class="modal fade" id="hp-newsletter" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title h4,responsive">Subscription form</h4>
</div>
<div class="modal-body">
<div class="row">
<form class="col-md-12">
<p>We'll write rarely, but only the best content.</p>
<br>
<div class="input-field">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Your name</label>
</div>
<div class="input-field">
<i class="material-icons prefix">mail</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Your e-mail</label>
</div>
</form>
<div class="text-center">
<button type="button" class="btn btn-primary waves-effect waves-light">Sumbit</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">X</button>
</div>
</div>
</div>
</div>
<!--/.Modal: subscription form-->
Contact Form
Open Modal
<!--Button: contact form-->
<a href="#" class="btn btn-primary btn-lg waves-effect waves-light" data-toggle="modal" data-target="#contact-form">Open Modal</a>
<!-- Modal: Contact form -->
<div class="modal fade" id="contact-form" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Write to us </h4>
</div>
<div class="modal-body">
<div class="row">
<form class="col-md-12">
<p>We like to receive a messages</p>
<br>
<div class="input-field">
<i class="material-icons prefix">account_circle</i>
<input id="contact-name" type="text" class="validate">
<label for="contact-name">Your name</label>
</div>
<div class="input-field">
<i class="material-icons prefix">mail</i>
<input id="contact-mail" type="tel" class="validate">
<label for="contact-mail">Your e-mail</label>
</div>
<div class="input-field">
<i class="material-icons prefix">label</i>
<input id="contact-subject" type="text" class="validate">
<label for="contact-subject">Subject</label>
</div>
<div class="input-field">
<i class="material-icons prefix">mode_edit</i>
<textarea id="contact-text" class="materialize-textarea"></textarea>
<label for="contact-text">Message</label>
</div>
</form>
<div class="text-center">
<button type="button" class="btn btn-primary waves-effect waves-light">Send</button>
</div>
<hr>
<div class="col-md-12">
<div class="call">
<p>Or would you prefer to call? <span class="cf-phone"><i class="fa fa-phone"> +01 234 565 280</i></span></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">X</button>
</div>
</div>
</div>
</div>
<!--/.Modal: Contact form-->