Saturday

PopUp window in javascript to get input from user

Program to open a popup window when a site(web page) loads.This Popup used to get Input from user i.e A popup window with drop-down box,text box.

Here is a javascript code to open and close a popUp on button click.Can be used along with JSP & PHP programs

JavaScript to Open & Close Popup window:

<script type="text/javascript">
$(function(){
    $('#popuplink').click(function(){
               
        $('#popup').show("slow");
   
    });
   
     $('#popupclose').click(function(){
     
        $('#popup').hide("slow");
   
    });
});
</script>
The below html code hold things to be shown in the Popup window.It is in hidden div, it will be displayed  & hidden on button click

HTML:


<div id="popup">
<div id="contentarea">
<form method="post" action="home.jsp">
Choose Your City:<select id="popuptext" name="city">
<option id="popuptext" value="">select ....!</option>
<option id="popuptext" value="">Pradeesh</option>
<option id="popuptext" value="">Chennai</option>
<option id="popuptext" value="">Delhi</option>
<option id="popuptext" value="">Mumbai</option>
<option id="popuptext" value="">Techie</option>
</select>
 <input id="popupclose" type="submit" value="submit" />  
</form>
</div>    
</div>


css styling Element to make effective effect

CSS:


#popup
{
    display:none;
    position: fixed;
    width:250px;
    height: 150px;
    top: 50%;
    left: 50%;
    margin-left:-155px;
    margin-top:-110px;
    border:5px solid red;
    background-color:#DEDFDE;
    padding:30px;
    z-index:102;
    font-family:Verdana;
    font-size:10pt;
    border-radius:10px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    font-weight:bold;
}
#contentarea
{
    height:auto;
    width:250px;
    margin:60px auto;
}
#popupclose
{
    margin:30px 0 0 80px;
    width:70px;
   
}


0 comments:

Post a Comment

Don't Forget To Join US Our Community
×
blogger