Design simple popup using CSS/HTML

[SwapnilD]

Hi ALL,

I am developing a website for which I need a popup which will display information. I need this popup to be designed in CSS / HTML.

I am ASP.NET developer and not a designer, although I have basic knowledge of of HTML and CSS. But, not able to figure out how to design such a popup.

It would be great if anyone help me to achieve this.

For your reference I have attached a popup screen shot which I took from some other website...(I don't need exactly same popup, but somewhat similar).

Thanks in Advance

Swapnil

[Exequiel]

HTML :

<div id="popup_main_bg" align="center" style="/*display:none;*/">
<div id="pop_msg" align="justify" style="display:none;"></div>
    <div id="popup_content">
    <div id="help_desk_header" align="justify">
        <span id="poptitle"></span>    <span id="closepop" onClick="closepop()"> x </span>
    </div>
    <div id="popup_content_data" align="justify">
 
    </div>
    <hr id="hhr">
 
    <div id="buttonzzx">
        <input type="submit" form="form_ticket" id="savehelp" value="Save" style="padding: 5px; font-weight:bold; float:right; margin-left:4px;" onClick="savehelp()">
        <input type="reset" value="Reset" onClick="reset_me()" style="padding: 5px; font-weight:bold; float:right;">
    </div>
    <div style="padding:0; clear:both;"></div>
    <br>
    </div><!-- popup_content -->
</div>

CSS :

<style>
#popup_main_bg{
    width:100%; height:100%; background: rgba(102,102,102,0.4); position:fixed; z-index:500;
    }
#help_desk_header{
    font-size: 13px;
    border:1px solid #BFBFBF;
    padding:5px;
    border-radius: 5px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    cursor: move;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    }
#help_desk_header span#poptitle{    
    font-size: 12px;
    font-weight:bold;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    }
#popup_content{
    padding:2px;
    background:#fff;
    border:1px solid #8A8A8A;
    width: 500px;
    border-radius: 5px;
    }
#popup_content_data{
    background:#fff;
    padding: 0;
    min-height: 300px;
    padding-top: 5px;
    }
#popup_content input[typebutton],
#popup_content input[type=reset],
#popup_content input[type=submit],
#popup_content button{
    border: 1px solid #B4B4B4;
    cursor:pointer;
    border-radius: 3px;
    font-size: 14px;
    box-shadow:0px 1px 1px rgba(1,1,1,0.2);
    background: rgb(215,222,227); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(215,222,227,1) 0%, rgba(245,247,249,1) 52%, rgba(215,222,227,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(215,222,227,1)), color-stop(52%,rgba(245,247,249,1)), color-stop(100%,rgba(215,222,227,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(215,222,227,1) 0%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(215,222,227,1) 0%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(215,222,227,1) 0%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(215,222,227,1) 0%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7dee3', endColorstr='#d7dee3',GradientType=0 ); /* IE6-9 */
 
    }
#popup_content input[typebutton]:hover,
#popup_content input[type=reset]:hover,
#popup_content input[type=submit]:hover,
#popup_content button:hover{
    background: rgb(188,193,198); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(188,193,198,1) 0%, rgba(237,238,239,1) 52%, rgba(188,193,198,1) 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(188,193,198,1)), color-stop(52%,rgba(237,238,239,1)), color-stop(99%,rgba(188,193,198,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(188,193,198,1) 0%,rgba(237,238,239,1) 52%,rgba(188,193,198,1) 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(188,193,198,1) 0%,rgba(237,238,239,1) 52%,rgba(188,193,198,1) 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(188,193,198,1) 0%,rgba(237,238,239,1) 52%,rgba(188,193,198,1) 99%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(188,193,198,1) 0%,rgba(237,238,239,1) 52%,rgba(188,193,198,1) 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcc1c6', endColorstr='#bcc1c6',GradientType=0 ); /* IE6-9 */
    }
#popup_content input[typebutton]:active,
#popup_content input[type=reset]:active,
#popup_content input[type=submit]:active,
#popup_content button:active{
    box-shadow: inset 0px 1px 2px 2px rgba(1,1,1,0.3);
    }
#closepop{
    font-weight:bold;
    font-size:16px;
    float:right;
    padding-bottom:2px;
    padding-left: 7px;
    padding-right: 7px;
    margin-top:-4.5px;
    line-height: 18px;
    border-radius: 3px;
    cursor:pointer;
    border: 1px solid rgba(1,1,1,0);
    }    
#closepop:hover{
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.6);
    color: #333;
    box-shadow: inset 0px 1px 1px 2px rgba(1,1,1,0.2);
    }
#support_search_area{
    padding:5px;
    background: rgb(228,245,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(228,245,252,1) 0%, rgba(191,232,249,1) 47%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(47%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 47%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 47%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 47%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 47%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
    }
 
#pop_msg{
    position:absolute;
    padding: 8px;
    border-radius:5px;
    min-width: 300px;
    max-width: 400px;
    font-size: 15px;
    display:none;
    font-weight:bold;
    margin-left: 50px;
    margin-top: 100px;
    z-index: 550;
    text-shadow:0px 1px 1px rgba(1,1,1,0.3);
    box-shadow:0px 1px 2px rgba(1,1,1,0.4);
    }
.errormsg{
    background:/*#FF9F9Frgba(0,0,0,0.7)*/ rgba(255,98,98,0.8);
    border: 1px solid /*#FF4A4A*/ rgba(255,81,81,0.9);
    color:#FFF;
    }
.successmsg{
    background:/*#FF9F9F*/ rgba(0,196,0,0.8);
    border: 1px solid /*#FF4A4A*/ rgba(0,253,0,1);
    color:#FFF;
    }
</style>
 
 

try that one. . .
to close or show that popup use javascript or jquery. . .

[SwapnilD]

Hi,

thanks for prompt reply.

Code provided by you is working fine in all browsers but IE.

In IE sync is off..

In I.E. Close button is jumping off the "poptitle" DIV.

[Exequiel]

hehe. . . thats my problem too. . . try it in IE9 above. . .

[shadowstrike]

Hey If you need to display a customize way to display your pop up you can use this:--

<html>
 
<body>
 
<style type="text/css">
#lightbox {
    display:none;
    background:#000000;
    opacity:0.9;filter:alpha(opacity=90);
    position:absolute;
    top:0px;
    left:0px;
    min-width:100%;
    min-height:100%;
    z-index:1000;
} 
 
#contact-us-lightbox-panel {
    display:none;
    position:fixed;
    top:100px;
    left:20%;
    margin-left:0px;
    width:900px;
    background:#FFFFFF;
    padding:7px;
    border:2px solid #CCCCCC;
    z-index:1001;
}
 
#contact-us-lightbox-panel #headerbar-lightbox-panel{
    width: 904px;
}
 
#contact-us-lightbox-panel #contents_for_address{
    background-color: #a6a6a6;
    width: 904px;
    height: 70px;
    margin-top: 10px;
}
 
#contact-us-lightbox-panel #contents_for_address #left{
    float: left;
    margin-left: 50px;
    font-family: Helvetica;
    font-size: 14px;
}
 
#contact-us-lightbox-panel #contents_for_address #left img{
    position: absolute;
    left: 25px;
}
 
#contact-us-lightbox-panel #contents_for_address #right{
    margin-left: 500px;
    font-family: Helvetica;
    font-size: 14px;
}
 
#contact-us-lightbox-panel #contents_for_write_to_us{
    margin-top: 10px;
}
 
#contact-us-lightbox-panel #contents_for_write_to_us textarea{
    width: 880px; 
    height: 150px;
}
 
</style>
<div class="Clickme">ClickMe</div>
<div id="contact-us-lightbox-panel">  
    <div id="headerbar-lightbox-panel"></div>
    <div class="close-panel"><a href="#">X</a></div>
    <div id="contents_for_address">
        <div id="left">
 
            <p>Call Us :</p>
            <p>Office number :0000000</p>
            <p>Toll Free : 0000000</p>
        </div>
        <div id="right">
            <p>Address :</p>
            <p>asdasdsadasd</p>
            <p>dsadasdasdsadas</p>
        </div>
    </div>
    <div id="contents_for_write_to_us">
        <p>Write To Us(Characters 600 Limit)</p>
        <textarea></textarea>
    </div>
    <button class="save-pop">Submit</button>
    <button class="save-pop">Reset</button>
</div>
<div id="lightbox"></div>  
 
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".Clickme").click(function(){
    $("#lightbox, #contact-us-lightbox-panel").fadeIn(300); 
  });
   $(".close-panel").click(function(){  
    $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  });
     $(".save-pop").click(function(){  
    $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  });
});
 
</script>
</body>
 
<html>
 

Make sure you import the jquery library .........lemme know if its working