Create modal in css and html

Total Views : 228
Zoom In Zoom Out Read Later Print

This code show you how can create simple modals and animate them.

button.css

@charset "UTF-8";
/* Common Styles */
[class*="pdb-"] {
min-width: 95px;
padding: 11px 15px;
display: inline-block;
position: relative;
font-size: 12px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
text-decoration: none !important;
text-align: center;
}
.pdb-round {
-webkit-border-radius: 5px;
border-radius: 5px;
}

/* Basic */
.pdb-basic {
-webkit-transition: background-color .25s ease;
transition: background-color .25s ease;
border: 1px solid #f5f5f5;
}
.pdb-basic.pdb-default {
background-color: #f5f5f5;
color: #444;
}
.pdb-basic.pdb-default:hover {
background-color: #eee;
color: #666;
}
.pdb-basic.pdb-primary {
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
}
.pdb-basic.pdb-primary:hover {
color: #fff;
background-color: #286090;
border-color: #286090;
}
.pdb-basic.pdb-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
.pdb-basic.pdb-success:hover {
color: #fff;
background-color: #449d44;
border-color: #449d44;
}
.pdb-basic.pdb-info {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de;
}
.pdb-basic.pdb-info:hover {
color: #fff;
background-color: #31b0d5;
border-color: #31b0d5;
}
.pdb-basic.pdb-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.pdb-basic.pdb-warning:hover {
color: #fff
;background-color: #ec971f;
border-color: #ec971f;
}
.pdb-basic.pdb-danger {color: #fff;
background-color: #d9534f;
border-color: #d9534f;
}
.pdb-basic.pdb-danger:hover {color: #fff;
background-color: #c9302c;
border-color: #c9302c;
}
.pdb-basic.pdb-black {
color: #fff;
background-color: #28373b;
border-color: #28373b;
}
.pdb-basic.pdb-black:hover {
background-color: #131A1B;
border-color: #131A1B;
color: #fff;
}
.pdb-basic.pdb-pink {
color: #fff;
background-color: #9d5db8;
border-color: #9d5db8;
}
.pdb-basic.pdb-pink:hover {
color: #fff;
background-color: #8e44ad;
border-color: #8e44ad;
}
.pdb-basic.pdb-turquoise {
color: #fff;
background-color: #1abc9c;
border-color: #1abc9c;
}
.pdb-basic.pdb-turquoise:hover {
color: #fff;
background-color: #16a085;
border-color: #16a085;
}

form.css

@charset "UTF-8";
.pd-form-style .form-field {
margin-bottom: 20px;
}
.pd-form-style .form-field input {
background: transparent;
width: 100%;
height: 50px;
padding: 5px 18px;
font-size: 14px;
border-width: 0 0 1px 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1);
}
.pd-form-style .form-field textarea {
background: transparent;
width: 100%;
padding: 10px 18px;
font-size: 14px;
border-width: 0 0 1px 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1);
}
.pd-form-style .form-field input:focus,
.pd-form-style .form-field textarea:focus {
border-color: rgba(0, 0, 0, 0.4);
outline: none;
}
.pd-form-style .form-button {
text-align: center;
}
.pd-form-style .form-button button {
background: transparent;
border-width: 0 0 1px 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1);
height: 46px;
min-width: 170px;
font-size: 14px;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.pd-form-style .form-button button:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
color: #444;
}

animate.css

@charset "UTF-8";
/* Animation */
[class*='pd-animation-'] {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.pd-animation-fade {
-webkit-animation-name: pd-fade;
animation-name: pd-fade;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-timing-function: linear !important;
animation-timing-function: linear !important;
}
.pd-animation-slide-top {
-webkit-animation-name: pd-fade-top;
animation-name: pd-fade-top;
}
.pd-animation-slide-bottom {
-webkit-animation-name: pd-fade-bottom;
animation-name: pd-fade-bottom;
}
.pd-animation-slide-left {
-webkit-animation-name: pd-fade-left;
animation-name: pd-fade-left;
}
.pd-animation-slide-right {
-webkit-animation-name: pd-fade-right;
animation-name: pd-fade-right;
}
.pd-animation-scale-up {
-webkit-animation-name: pd-animation-scale-up;
animation-name: pd-animation-scale-up;
}
.pd-animation-scale-down {
-webkit-animation-name: pd-animation-scale-down;
animation-name: pd-animation-scale-down;
}
.pd-animation-shake {
-webkit-animation-name: pd-shake;
animation-name: pd-shake;
}
.pd-animation-rotate {
-webkit-animation-name: pd-rotate;
animation-name: pd-rotate;
}
.pd-animation-scale {
-webkit-animation-name: pd-scale;
animation-name: pd-scale;
}
.pd-animation-hover:not(:hover),
.pd-animation-hover:not(:hover) [class*='pd-animation-'] {
-webkit-animation-name: none;
animation-name: none;
}
.pd-animation-reverse {
-webkit-animation-direction: reverse;
animation-direction: reverse;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

/* Fade */
@-webkit-keyframes pd-fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes pd-fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* Fade Top */
@-webkit-keyframes pd-fade-top {
0% {
opacity: 0;-webkit-transform: translateY(-60%);
}
100% {
opacity: 1;-webkit-transform: translateY(0);
}
}

@keyframes pd-fade-top {
0% {
opacity: 0;transform: translateY(-60%);
}
100% {
opacity: 1;transform: translateY(0);
}
}

/* Fade Bottom */
@-webkit-keyframes pd-fade-bottom {
0% {
opacity: 0;-webkit-transform: translateY(60%);
}
100% {
opacity: 1;-webkit-transform: translateY(0);
}
}

@keyframes pd-fade-bottom {
0% {
opacity: 0;transform: translateY(60%);
}
100% {
opacity: 1;transform: translateY(0);
}
}

/* Fade Left */
@-webkit-keyframes pd-fade-left {
0% {
opacity: 0;-webkit-transform: translateX(-60%);
}
100% {
opacity: 1;-webkit-transform: translateX(0);
}
}

@keyframes pd-fade-left {
0% {
opacity: 0;transform: translateX(-60%);
}
100% {
opacity: 1;transform: translateX(0);
}
}

/* Fade Right */
@-webkit-keyframes pd-fade-right {
0% {
opacity: 0;-webkit-transform: translateX(60%);
}
100% {
opacity: 1;-webkit-transform: translateX(0);
}
}

@keyframes pd-fade-right {
0% {
opacity: 0;transform: translateX(60%);
}
100% {
opacity: 1;transform: translateX(0);
}
}

/* Scale Up */
@-webkit-keyframes pd-animation-scale-up {
0% {
opacity: 0;-webkit-transform: scale(0.2);
}
100% {
opacity: 1;-webkit-transform: scale(1);
}
}

@keyframes pd-animation-scale-up {
0% {
opacity: 0;transform: scale(0.2);
}
100% {
opacity: 1;transform: scale(1);
}
}

/* Scale Down */
@-webkit-keyframes pd-animation-scale-down {
0% {
opacity: 0;-webkit-transform: scale(1.6);
}
100% {
opacity: 1;-webkit-transform: scale(1);
}
}
@keyframes pd-animation-scale-down {
0% {
opacity: 0;transform: scale(1.6);
}
100% {
opacity: 1;transform: scale(1);
}
}

/* Rotate */
@-webkit-keyframes pd-rotate {
0% {
-webkit-transform: rotate(280deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes pd-rotate {
0% {
transform: rotate(280deg);
}
100% {
transform: rotate(360deg);
}
}

/* Shake */
@-webkit-keyframes pd-shake {
0%, 100% {
-webkit-transform: translateX(0);
}
10% {
-webkit-transform: translateX(-9px);
}
20% {
-webkit-transform: translateX(8px);
}
30% {
-webkit-transform: translateX(-7px);
}
40% {
-webkit-transform: translateX(6px);
}
50% {
-webkit-transform: translateX(-5px);
}
60% {
-webkit-transform: translateX(4px);
}
70% {
-webkit-transform: translateX(-3px);
}
80% {
-webkit-transform: translateX(2px);
}
90% {
-webkit-transform: translateX(-1px);
}
}
@keyframes pd-shake {
0%, 100% {
transform: translateX(0);
}
10% {
transform: translateX(-9px);
}
20% {
transform: translateX(8px);
}
30% {
transform: translateX(-7px);
}
40% {
transform: translateX(6px);
}
50% {
transform: translateX(-5px);
}
60% {
transform: translateX(4px);
}
70% {
transform: translateX(-3px);
}
80% {
transform: translateX(2px);
}
90% {
transform: translateX(-1px);
}
}

/* Scale */
@-webkit-keyframes pd-scale {
0% {
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes pd-scale {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

modal.css

@charset "UTF-8";
button[class*="tcb-"] {
outline: none;
border: 0;
}
.modal-padding {
padding: 25px 30px;
}
.modal-backdrop.in {
opacity: 0.75;
}
.pd-modal {
text-align: center;
padding: 0!important;
}
.pd-modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.pd-modal .modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.pd-modal .modal-title {
font-size: 22px;
}
.pd-modal .modal-content {
box-shadow: none;
border: 0;
}
.pd-modal .modal-header,
.pd-modal .modal-body,
.pd-modal .modal-footer {
border: 0;
padding: 0;
}
.pd-modal .modal-header {
margin-bottom: 20px;
}
.pd-modal .modal-footer {
margin-top: 30px;
}
.pd-modal .modal-body p + p {
margin-top: 15px;
}
.pd-modal .close {
margin-top: 0;
position: absolute;
right: -15px;
top: -15px;
font-weight: 300;
background: #333;
color: #fff;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
opacity: 1;
font-size: 13px;
transition: .3s ease all;
}
.pd-modal .close:hover {
background: #222;
}

modal.html

<!DOCTYPE html>
<html lang="zxx">
<head>
<!-- meta character set -->
<meta charset="utf-8">
<title>Modal</title>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- bootstrap.min -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- demo stylesheet -->
<link rel="stylesheet" href="css/main.css"> <!-- This file only used for demostration -->
<!-- buttons stylesheet -->
<link rel="stylesheet" href="css/buttons.css">
<!-- form stylesheet -->
<link rel="stylesheet" href="css/form.css">
<!-- animate stylesheet -->
<link rel="stylesheet" href="css/animate.css">
<!-- modal stylesheet -->
<link rel="stylesheet" href="css/modal.css">
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- bootstrap.min.js -->
<script src="js/bootstrap.min.js"></script>
</head>
<body id="body">
<main class="site-content">
<section class="sec-spacer">
<div class="container container-center">
<div class="row">
<div class="col-md-2">
<h3 class="title">Modal </h3>
</div>
<div class="col-md-8">
<!-- Default Modal -->
<button class="pdb-basic pdb-round pdb-warning" data-toggle="modal" data-target="#modalDefault">Default Modal</button>
<!-- Login Modal -->
<button class="pdb-basic pdb-round pdb-success" data-toggle="modal" data-target="#modalLogin">Login Form</button>
<!-- SignupModal -->
<button class="pdb-basic pdb-round pdb-danger" data-toggle="modal" data-target="#modalSignUp">Sign Up Form</button>

<!-- Default Modal Start -->
<div class="modal pd-modal fade" id="modalDefault">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>
<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Default Modal End -->
<!-- Modal Login Start -->
<div class="modal pd-modal fade" id="modalLogin">
<div class="modal-dialog modal-sm">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Welcome Back!</h4>
</div>
<form class="pd-form-style">
<div class="form-field">
<input type="email" placeholder="Email" required>
</div>
<div class="form-field">
<input type="password" placeholder="Password" required>
</div>
<div class="form-button">
<button type="submit">SIGN IN</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal Login End -->
<!-- Modal Sign Up Start -->
<div class="modal pd-modal fade" id="modalSignUp">
<div class="modal-dialog">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Rgistration Form</h4>
</div>
<form class="pd-form-style">
<div class="form-field">
<input type="text" placeholder="First Name" required>
</div>
<div class="form-field">
<input type="text" placeholder="Last Name" required>
</div>
<div class="form-field">
<input type="email" placeholder="Email" required>
</div>
<div class="form-field">
<input type="password" placeholder="Password" required>
</div>
<div class="form-button">
<button type="submit">REGISTER NOW</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal Sign Up End -->
</div>
</div>
</div>
</section>
<!-- Modal Animation Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<div class="row">
<div class="col-md-2">
<h3 class="title">Animation</h3>
</div>
<div class="col-md-10">
<!-- Slide Top Modal -->
<button class="pdb-basic pdb-round pdb-info" data-toggle="modal" data-target="#modalSlideTop">Slide Top</button>
<!-- Slide Right Modal -->
<button class="pdb-basic pdb-round pdb-info" data-toggle="modal" data-target="#modalSlideRight">Slide Right</button>
<!-- Slide Bottom Modal -->
<button class="pdb-basic pdb-round pdb-info" data-toggle="modal" data-target="#modalSlideBottom">Slide Bottom</button>
<!-- Slide Left Modal -->
<button class="pdb-basic pdb-round pdb-info" data-toggle="modal" data-target="#modalSlideLeft">Slide Left</button>
<!-- Scale Up Modal -->
<button class="pdb-basic pdb-round pdb-info" data-toggle="modal" data-target="#modalScaleUp">Scale Up</button>
<!-- Scale Down Modal -->
<button class="pdb-basic pdb-round pdb-info" data-toggle="modal" data-target="#modalScaleDown">Scale Down</button>
<!-- Shake Modal -->
<button class="pdb-basic pdb-round pdb-info" data-toggle="modal" data-target="#modalShake">Shake</button>
<!-- Scale Modal -->
<button class="pdb-basic pdb-round pdb-info" data-toggle="modal" data-target="#modalScale">Scale</button>
<!-- Rotate Modal -->
<button class="pdb-basic pdb-round pdb-info" data-toggle="modal" data-target="#modalRotate">Rotate</button>
<!-- Slide Top Modal Start -->
<div class="modal pd-modal pd-animation-slide-top" id="modalSlideTop">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>

<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Slide Top Modal End -->
<!-- Slide Right Modal Start -->
<div class="modal pd-modal pd-animation-slide-right" id="modalSlideRight">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>
<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Slide Right Modal End -->
<!-- Slide Bottom Modal Start -->
<div class="modal pd-modal pd-animation-slide-bottom" id="modalSlideBottom">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>
<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Slide Bottom Modal End -->
<!-- Slide Left Modal Start -->
<div class="modal pd-modal pd-animation-slide-left" id="modalSlideLeft">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>
<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Slide Left Modal End -->
<!-- Scale Up Modal Start -->
<div class="modal pd-modal pd-animation-scale-up" id="modalScaleUp">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>
<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Scale Up Modal End -->
<!-- Scale Down Modal Start -->
<div class="modal pd-modal pd-animation-scale-down" id="modalScaleDown">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>
<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Scale Down Modal End -->
<!-- Shake Modal Start -->
<div class="modal pd-modal pd-animation-shake" id="modalShake">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>
<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Shake Modal End -->
<!-- Scale Modal Start -->
<div class="modal pd-modal pd-animation-scale" id="modalScale">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>
<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Scale Modal End -->
<!-- Rotate Modal Start -->
<div class="modal pd-modal pd-animation-rotate" id="modalRotate">
<div class="modal-dialog ">
<div class="modal-content modal-padding">
<div class="modal-header">
<i class="fa fa-close close" data-dismiss="modal"></i>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Some text...</p>
<p>More Text...</p>
</div>
<div class="modal-footer">
More and more...
</div>
</div>
</div>
</div>
<!-- Rotate Modal End -->
</div>
</div>
</div>
</section>
<!-- Modal Animation End -->
</main>
</body>
</html>

See More

Latest Photos