Wednesday 26 June 2013

Popup Window in HTML

HTML
<div class="popup">

    <div class="blur-bg"></div>

    <div class="popup-win"><img src="foo.jpg"/></div>
</div>
CSS
    .blur-bg{
            position: absolute;
            top: 0px;
            z-index: 1000;
            opacity: 0.5;
            height: 2323px;
            left: 0px;
            width: 100%;
            background-color: black;
        }
    .popup-win{
            position: fixed;
            width: 400px;
            z-index: 1001;
            top: 50%;
            left: 50%;
            display: block;
            margin-top: -85px;
            margin-left: -215px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
            background-color: #fff;
            padding: 15px!important;
        }

No comments:

Post a Comment