popupbox-html

Simple popupbox In html (use any where asp.net for php replace asp button with input)

Example

Name
Email
Phone Number
Message

Style and script must be inside head of the html

<style type="text/css">

      .career_head2

{

            float:none;

            width:973px;

            color:#072324;

            height:35px;

            background:url(../images/career_head_2.jpg) repeat-x;

           

}

.career_head1

{

padding:10px 0px;

           

}

.career_bg

            {border:1px solid #cccccc;}

.career_head1 h1

{

            float:left;

            font-size:22px;

            color:#439c03;

            text-align:left;

            padding:3px 15px 10px 10px;

           

}

.description_career

{

            background:#ebebeb;

            width:1000px;  

}

.carrier_button

{

background: url("../images/clear_btn.jpg") no-repeat scroll 0 0 transparent;

    border: 0 none;

    height: 35px;

    width: 95px;

            cursor:pointer;   

            width: 95px;

}

.popupWindow6

    {

        position:absolute;

        left:384px;

        top:300px;

        width:575px;

        border:solid 5px #dbdbdb;

       -webkit-border-radius: 10px;

               border-radius: 10px;

               -webkit-box-shadow: 0px 0px 8px 1px rgba(5, 5, 5, 0.5);

               box-shadow: 0px 0px 8px 1px rgba(5, 5, 5, 0.5);

       background-color :#FFF;

       filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=7, OffY=7, Color=#C2A385);

       display:none;

       font-size:20px;

       font-family:Arial;

       color:#000;

    }

.popupWindow6 td

            {text-align:left;}

    h5.top_head

    {

      font-size:18px;

      color:#4d4d4f;

     

      background-repeat:repeat-x;

      background-position:bottom;

      padding:20px 25px 20px 25px;

      margin-bottom:25px;

    }

   

        .popup_table

    {

      font-size:14px;

      color:#4d4d4f;

      text-transform:uppercase;

      margin:10px;

    }

.popup_table tr td

{

            padding-bottom:10px;

}

   

   

   

    .popup_textbox

    {

      width:380px;

      height:22px;

      border:1px solid #c7c8ca;

      -webkit-border-radius: 5px;

        border-radius: 5px;

                        margin-bottom:3px;

    }

       .popup_textarea

    {

      width:380px;

      height:130px;

      border:1px solid #c7c8ca;

      -webkit-border-radius: 5px;

        border-radius: 3px;

                        font-family:Arial, Helvetica, sans-serif;

    }

    .btnOrder {

    background-color: #2AA3DE;

    border: 1px solid;

    border-radius: 5px 5px 5px 5px;

    color: White;

    cursor: pointer;

    font-size: large;

    height: 40px;

    width: 150px;

}

       

    </style>

       <script type="text/javascript">

function Addnew()

{

document.getElementById('dvApply').style.display='block';

return false ;

}function Hidenew()

{

document.getElementById('dvApply').style.display='none';

return false ;

}

</script>

Place Below Code in Body part

<div>

<input id="applynow" class="btnOrder" type="button"   value="viewPopUp" onclick="return Addnew()" />

<div id="dvApply"  class="popupWindow6">

       

        

     

     

        

      <table class="popup_table">

     

       <tr>

         <td width="23%">Name</td>

         <td width="77%"><input type="text"  id="txtName"  class="popup_textbox"/>

         </td>

       </tr>

      

       <tr>

         <td width="23%">Email</td>

        <td width="77%">

         <input type="text"  id="txtEmail" class="popup_textbox" />

       

               

       </td>

       </tr>

      

       <tr>

         <td width="23%">Phone Number</td>

       <td width="77%">

         <input type="text"  id="txtPhone" class="popup_textbox"/>

          </td>

       </tr>

      

       <tr>

         <td width="23%">Message</td>

         <td width="90%"><input type="text" id="txtContent"   class="popup_textarea" /></td>

     </tr>

      

      

       <tr>

       <td width="23%">

       </td>

       <td width="77%"><input id="btnSave" type="button" value="Save" class="btnOrder"

                        />  

           <input id="btnCancel" runat="server" value="Cancel" type="button" onclick="return Hidenew()"

                class="btnOrder"

               />

</td>

       </tr>

      

      

      

      

      </table>

     

     

    </div>

</div>