Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery, javascript Training

Jquery training blog

How to make pure css modal without javascript

Modal is an essential part of web development. To show any information on on a note or show any pop up or zoom photo or video we always use modal. There are several modal plugin in the web,  but if we want to create our own custom css  modal without any java script only using css then how? .

Now question arises why only css modal why not javascript or jquery modal? Actually I am not telling you to stop using javascript or jquery modal but it is the situation who demands it.

When your web page is fully loaded with jquery and if there is a chance to conflicting jquery libraries use Css Modal.

When we are using multiple jquery plugins in our web page it is seen the jquery libraries are conflicting with each other, in that time we need costume plugins which will not conflict with jquery or dependent on jquery.I feel creating an javascript modal plugin is very simple to prevent the need of including another large javascript library to use jquery modal.

Pure Css modal

 

.btn {
  background: #428bca;
  border: #357ebd solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}

.btn-close {
  color: #aaa;
  font-size: 30px;
  text-decoration: none;
  position: absolute;
  right: 5px;
  top: 0;
}
.btn-close:hover {
  color: #919191;
}
.jquery-modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.jquery-modal:target:before {
  display: block;
}
.jquery-modal:target .jquery-modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 20%;
}
.jquery-modal-dialog {
  background: #fefefe;
  border: #333 solid 1px;
  border-radius: 5px;
  margin-left: -200px;
  position: fixed;
  left: 50%;
  top: -100%;
  z-index: 11;
  width: 360px;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.jquery-modal-body {
  padding: 20px;
}
.jquery-modal-header,
.jquery-modal-footer {
  padding: 10px 20px;
}
.jquery-modal-header {
  border-bottom: #eee solid 1px;
}
.jquery-modal-header h2 {
  font-size: 20px;
}
.jquery-modal-footer {
  border-top: #eee solid 1px;
  text-align: right;
}

The html part

<a href="#jquery-modal" class="btn btn-big">Modal!</a> <!-- Modal --> 
<div class="jquery-modal" id="jquery-modal" aria-hidden="true"> 
<div class="jquery-modal-dialog"> <div class="jquery-modal-header">
 <h2>Modal in CSS?</h2> <a href="#" class="btn-close" aria-hidden="true">×</a> </div>
 <div class="jquery-modal-body"> <p>One modal example here! :D</p> </div> 
<div class="jquery-modal-footer"> <a href="#" class="btn">Nice!</a> </div> 
</div> 
</div>

Full Source Code

<html> <head> <title>Css modal</title> 
<style> .btn { 
background: #428bca;
 border: #357ebd solid 1px; border-radius: 3px; 
color: #fff; display: inline-block; 
font-size: 14px; padding: 8px 15px; 
text-decoration: none;
 text-align: center; min-width: 60px;
 position: relative; transition: color .1s ease; } 
.btn-close { color: #aaa; font-size: 30px; text-decoration: none; 
position: absolute; right: 5px; top: 0; }
 .btn-close:hover { color: #919191; } 
.jquery-modal:before { content: ""; display: none; background: rgba(0, 0, 0, 0.6);
 position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } 
.jquery-modal:target:before { display: block; }
 .jquery-modal:target .jquery-modal-dialog { -webkit-transform: translate(0, 0); 
-ms-transform: translate(0, 0); 
transform: translate(0, 0); top: 20%; } 
.jquery-modal-dialog { background: #fefefe; border: #333 solid 1px;
 border-radius: 5px; margin-left: -200px;
 position: fixed; left: 50%; top: -100%;
 z-index: 11; width: 360px; -webkit-transform: translate(0, -500%); 
-ms-transform: translate(0, -500%); transform: translate(0, -500%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .jquery-modal-body { padding: 20px; } .jquery-modal-header, .jquery-modal-footer { padding: 10px 20px; } .jquery-modal-header { border-bottom: #eee solid 1px; } .jquery-modal-header h2 { font-size: 20px; } .jquery-modal-footer { border-top: #eee solid 1px; text-align: right; } </style> </head>
 <body> <a href="#jquery-modal" class="btn btn-big">Modal!</a> 
<!-- Modal --> <div class="jquery-modal" id="jquery-modal" aria-hidden="true"> 
<div class="jquery-modal-dialog"> <div class="jquery-modal-header">
 <h2>Modal in CSS?</h2> <a href="#" class="btn-close" aria-hidden="true">×</a> </div>
 <div class="jquery-modal-body"> <p>One modal example here! :D</p> </div>
 <div class="jquery-modal-footer"> <a href="#" class="btn">Nice!</a>
 </div> </div> </div> <!-- /Modal --> 
</body> </html>
Please follow and like us:





Got Something To Say:

Your email address will not be published. Required fields are marked *

*


About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts