I created a popup within another popup. Here is my code,
<html>
<head>
<title>Popup</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//open popup
$("#pop").click(function(){
$("#background").css({"opacity" : "0.7"}).fadeIn("slow");
$("#overlay_form").fadeIn(1000);
positionPopup();
});
$("#plus").click(function(){
$("#background").css({"opacity" : "0.7"}).fadeIn("slow");
$("#overlay_form").css({"opacity" : "0.7"}).fadeIn("slow");
$("#inner_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
$("#background").fadeOut("slow");
document.getElementById("loc").value="";
document.getElementById("uname").value="";
});
$("#innerclose").click(function(){
$("#inner_form").fadeOut(500);
$("#overlay_form").fadeIn(500);
var newloc=document.getElementById("nloc").value;
document.getElementById("loc").value=newloc;
document.getElementById("nloc").value="";
});
});
//position the popup at the center of the page
function positionPopup(){
if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
$("#inner_form").css({
left: ($(window).width() - $('#inner_form').width()) / 2,
top: ($(window).width() - $('#inner_form').width()) / 5,
position:'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
<style>
#background{
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 1;
}
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: auto;
z-index:10;
}
#inner_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 250px;
height: auto;
z-index:12;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
height: auto;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="background"></div>
<a href="#" id="pop" >PopUp</a>
<br />
<form id="overlay_form" style="display:none">
<label>Name</label><input type="text" name="uname" id="uname" /><br/><br/>
<label>Location</label><input type="text" name="loc" id="loc" /><a href="#" id="plus" style="text-decoration:none;"> + </a><br/> <br/>
<a href="#" id="close">Close</a>
</form>
<form id="inner_form" style="display:none">
<label>New Location</label><input type="text" name="nloc" id="nloc" />
<a href="#" id="innerclose">Close</a>
</form>
</body>
In this, I want to display the outer popup bright color after close the inner popup. If the outer popup is close, then the browser window will display brightly.
Here is a fiddle. If I understood correctly the issue should be fixed.
The only thing I’ve added is
$("#overlay_form").css({"opacity" : "1"}).fadeIn("slow");in the$("#innerclose")‘s click callback.