Storing the value from dropdown box in session using ajax programming with lightbox means user will have only focus to dropdown box. Lightbox will be overlayed on website, so the dropdown box can easily get selected by user. Here is the tutorial, source code and demo link
Store value from Dropdown in SESSION Using Ajax with Lightbox
This below jquery will get the height of browser
var height=$(window).height();
var width=$(window).width();
[code type=javascript]
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
var height=$(window).height();
var width=$(window).width();
$(“.black-overlay”).css(“display”,”block”);
$(“.form-area”).css(“display”,”block”);
$(“.black-overlay”).css(“height”,height);
$(“.form-area”).css(“margin-top”,height/2);
$(“.form-area”).css(“margin-left”,width/2.6);
$(‘#city’).change(function(){
$(“.black-overlay”).css(“display”,”none”);
$(“.form-area”).css(“display”,”none”);
var area=$(‘#city option:selected’).val();
$.ajax({
type: “POST”,
url: “ajax.php”,
data: “area=”+area ,
success: function(html){
$(‘#area’).val(html);
}
});
});
});
</script>
[/code]
[code type=css]
.black-overlay
{
background:#000;
opacity: 0.6;
position:fixed;
top: 0;
left: 0;
width: 100%;
z-index: 110000;
display:none;
}
.form-area
{
width: 300px;
margin:0 auto;
position: fixed;
z-index: 10000000;
display:none;
}
#city
{
padding: 7px 13px;
width: 226px;
height: 43px;
border: 1px solid #fff;
line-height: 50px;
font-size: 21px;
color: #000;
}
.select-city-text
{
color: #fff;
text-transform: uppercase;
font-family: verdana;
font-size: 20px;
margin: 0 0 8px 0;
letter-spacing: 9px;
}
[/code]
[code type=php]
<?php
session_start();
?>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
var height=$(window).height();
var width=$(window).width();
$(“.black-overlay”).css(“display”,”block”);
$(“.form-area”).css(“display”,”block”);
$(“.black-overlay”).css(“height”,height);
$(“.form-area”).css(“margin-top”,height/2);
$(“.form-area”).css(“margin-left”,width/2.6);
$(‘#city’).change(function(){
$(“.black-overlay”).css(“display”,”none”);
$(“.form-area”).css(“display”,”none”);
var area=$(‘#city option:selected’).val();
$.ajax({
type: “POST”,
url: “ajax.php”,
data: “area=”+area ,
success: function(html){
$(‘#area’).val(html);
}
});
});
});
</script>
<style type=”text/css”>
.black-overlay
{
background:#000;
opacity: 0.6;
position:fixed;
top: 0;
left: 0;
width: 100%;
z-index: 110000;
display:none;
}
.form-area
{
width: 300px;
margin:0 auto;
position: fixed;
z-index: 10000000;
display:none;
}
#city
{
padding: 7px 13px;
width: 226px;
height: 43px;
border: 1px solid #fff;
line-height: 50px;
font-size: 21px;
color: #000;
}
.select-city-text
{
color: #fff;
text-transform: uppercase;
font-family: verdana;
font-size: 20px;
margin: 0 0 8px 0;
letter-spacing: 9px;
}
</style>
</head>
<body>
<div class=”black-overlay”>
</div>
<form method=”post” action=”” class=”form-area”>
<div class=”select-city-text”>Select City</div>
<select id=”city”>
<option>Bangalore</option><option>Mysore</option><option>Bagalkot</option><option>Bangalore</option><option>Basavakalyan</option><option>Belgaum</option><option>Bellary</option><option>Bhadravati</option><option>Bidar</option><option>Bijapur</option><option>Bommanahalli</option>
</select>
</form>
<input type=”text” id=”area” />
</body>
</html>
[/code]
Data passed to ajax.php will be stored in a SESSION
[code type=php]
session_start();
if(!empty($_POST[‘area’]))
{
$_SESSION[‘area’]=$_POST[‘area’];
echo $_SESSION[‘area’];
}
[/code]