Full screen Overlay Effects
When you search for a solution for fullscreen overlay, most website provide solutions using JavaScript or jQuery. The following solution is using only CSS and not using any JavaScript of jQuery. Here we are going to create a pop-up window that overlays an existing html page and disabling all links and bringing into focus on the pop up window.
Sometimes you need your entire browser window with a black tint in the background and make a popup at the center of the screen. Normally this technique is used for displaying a login window without moving from existing page or displaying a video, when a user clicks on a link or button in a web page.
Add this to your Page
<style>
.button {
width: 150px;
padding: 10px;
background-color: #2d57f8;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight: bold;
text-decoration: none;
}
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
#popupScreen {
height: 380px;
width: 340px;
margin: 0 auto;
position: relative;
z-index: 10;
display: none;
background: url(login.png) no-repeat;
border: 5px solid #cccccc;
border-radius: 10px;
background-color:rgb(245,245,245);
}
#popupScreen:target, #popupScreen:target + #cover {
display: block;
opacity: 2;
}
.cancel {
display: block;
position: absolute;
top: 3px;
right: 2px;
background: rgb(245,245,245);
color: black;
height: 30px;
width: 35px;
font-size: 30px;
text-decoration: none;
text-align: center;
font-weight: bold;
}
</style>
HTML Code
place anywhere
<div align="center"><a href="#popupScreen" class="button">Click here for Dialog</a> </div>
<div id="popupScreen">
<a href="#" class="cancel">×</a>
<h2>Hi there</h2>
</div>
<div id="cover"></div>
0 comments:
Post a Comment