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:
HTML:
css styling Element to make effective effect
CSS:
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">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
$(function(){
$('#popuplink').click(function(){
$('#popup').show("slow");
});
$('#popupclose').click(function(){
$('#popup').hide("slow");
});
});
</script>
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