Latest

random

CSS PopUp Div on Click

JavaScript Lightbox Effect Popup Window

A Light box is an effect that fades the page in the background to show you new content in the foreground. In this blog post I will demonstrate lightbox+onload+html+page, It means how to open a css popup div with close button example on click event.

There are lot of light-box codes available over the internet with animations. Most of them required heavy use of java script and some may required additional framework or third party tool. But in this example I am going to share a very light CSS pop which works on all browsers. Find the code snippet below :

css popup div example,css popup div on hover,css popup div on click,css popup div with close button,popup div css demo,css modal popup div,simple css popup div,css center popup div
lightbox popup example code
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs" Inherits="Demo" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>IE,Firefox,Chrome: Popup div css demo</title>
    <style type="text/css">
        .dark_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
        }

        .bright_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid #C5D1E2;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Simple css popup div</h1>
        <p>
            CSS popup div on click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
        </p>
        <div id="light" class="bright_content">
            <asp:Label ID="lbltext" runat="server" Text="Hey there!"></asp:Label>
            <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
        </div>
        <div id="fade" class="dark_overlay">
        </div>
    </form>
</body>
</html>

3 comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.