Modal Window in CSS
Thanks to the great and powerful CSS3, we can create a modal window on pure css, without resorting to additional scripts, modules and plugins.
- Step 1. Creating markup for the modal window
Here you can change the title of the modal window and its contents.
<!---Markup for a modal window---->
<div id="iw-modal" class="iw-modal">
<div class="iw-modal-wrapper">
<div class="iw-CSS-modal-inner">
<div class="iw-modal-header">
<h3 class="iw-modal-title">header</h3>
<a href="#close" title="Close" class="iw-close">×</a>
</div>
<div class="iw-modal-text">
<p>Here you can post your text, images, or feedback forms</p>
</div>
</div>
</div>
</div>
<!---end---->
Step 2. Adding a button to open the modal window.
This code you output in the place of the page where you need to have this button.
<a href="#iw-modal" class="iw-modal-btn">Open</a>
he #iw-modal anchor is used to open the block with the specified ID.
The iw-modal-btn class is used to set the desired CSS properties.
For example, you can use the following CSS properties:
.iw-modal-btn {
background:#013C74; /*button background color*/
color:#fff; /*font color*/
text-align:center;
display:inline-block;
padding:10px 20px; /*internal margins*/
text-decoration:none;
font-size:17px; /*font size*/
margin-top:30px;
transition: all 0.5s ease;
}
.iw-modal-btn:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
background:#439DE0; /*hover background color*/
}
Step 3. Adding CSS for the modal window
.iw-modal {
opacity: 0;
background: rgba(0,0,0,0.7);
pointer-events: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
transition: all 0.5s ease;
margin: 0;
padding: 0;
}
.iw-modal:target {
opacity: 1;
pointer-events: auto;
overflow-y: auto;
}
.iw-modal-wrapper {
margin:auto;
margin-top:25vh;
}
.iw-CSS-modal-inner {
position: relative;
background: #fff;
border: 1px solid #ccc;
border-radius: 0px;
}
.iw-modal-header {
padding: 15px;
background:#f1f1f1;
position:relative;
}
.iw-modal-title {
font-size: 18px;
color:#555;
font-weight:bold;
line-height: 1.5;
margin-top: 0;
margin-bottom: 0;
}
.iw-close {
position:absolute;
top:15px;
right:10px;
font-size: 24px;
color: #555;
text-decoration: none;
}
.iw-close:hover, .iw-close:focus {
color: #000;
cursor: pointer;
}
.iw-modal-text {
padding: 15px 20px;
}
@media (min-width: 550px) {
.iw-modal-wrapper {
max-width: 500px;
}
}
Be sure to connect the Jquery library here
