Show popup on select option
I am trying to show a popup on the page on the selected option value. I
need to check for the value in the select option and if it matches, the
popup should be displayed. But I am unable to show the popup on the
selected option changes. Also I want the popup shown everytime the user
selects that option. Please advise.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Popup Dialog - Click</title>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a {
text-decoration: none;
}
.popup {
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content {
min-width: 600px;
width: 600px;
min-height: 200px;
margin: -13px;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.content p {
clear: both;
color: #555555;
text-align: justify;
}
.content p a {
color: #d91900;
font-weight: bold;
}
.content .x {
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.content .x:hover {
cursor: pointer;
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#DisplayShippingSpeedChoicesTD').parent().parent().parent().attr("id",
"shipTable");
$('#shipTable select').attr('id', 'shipOption');
$('#shipOption').change(function() {
var value1 = ($('#shipOption option:selected').val());
// alert(value1);
if ((value1 === "701")) {
//alert(value1);
$('.popup').show();
}
});
});
$(function() {
var overlay = $('<div id="overlay"></div>');
$('.close').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.click').click(function() {
overlay.show();
overlay.appendTo(document.body);
return false;
});
});
</script>
</head>
<body>
<div class='popup'>
<div class='content'>
<img
src='http://www.developertips.net/demos/popup-dialog/img/x.png'
alt='quit' class='x' id='x' />
<h1>ATTENTION</h1>
<p>We do NOT recommend using UPS GROUND for customers who
do NOT live in the immediate surrounding states of
Florida. Reason being is that UPS Ground is ground
transport from us to you. So if you live in a state far
away and select this please note that it can take up to 5
business days. If you wish to still use UPS, we recommend
UPS 3 Day select as an alternative for our customers who
do not live near our company.
<br/>
<br/> <a href='' class='close'>Close</a>
</p>
</div>
</div>
<div id='container' style=" display:none;"> <a href=''
class='click'><h2><b>Click Here to See Popup! </b></h2></a>
<br/>
</div>
</body>
</html>
No comments:
Post a Comment