Reputation: 20078
how can i retain focus the popuP window? currently it shows the popup window but when i click anywhere outside the popup window it closes the window, what i would like to have is to close only when the user click on close button. here is the DEMO
//html:
<a id='clickShow' class='a'>Click here</a>
<div id="popupContact" class='divpopup'>
<a id="popupContactClose">x</a>
<h1>Option Image</h1>
test 123
</div>
<div id="backgroundPopup"></div>
//js:
//SETTING UP OUR POPUP
//0 means disabled 1 means enabled
var popupStatus = 0;
function centerPopup(){
//request data for centering
var win = {
height: $(document).height(),
width: $(document).width()
},
pop = {
height: $("#popupContact").height(),
width: $("#popupContact").width()
};
$("#popupContact").css({
"position": "fix",
"top": win.height/2-pop.height/2,
"left": win.width/2-pop.width/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": win.height
});
}
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup, #popupContact").fadeOut();
popupStatus = 0;
}
}
function loadPopup(id){
//centering with css
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css("opacity", "0.7").fadeIn();
$("#popupContact").fadeIn();
popupStatus = 1;
getValueOptionImage($(this).attr('id'));
};
}
function getValueOptionImage(value) {
$(".option_radio").unbind("change").change(function(e) {
alert("a ID: " + value + "\nradio Value: " + $(this).val());
});
}
$(function() {
$("a").on("click", loadPopup);
//CLOSING POPUP
$("#popupContactClose, #backgroundPopup").click(disablePopup);
//Press Escape event!
$(document).keypress(function(e){
if(popupStatus==1 && e.which==27) disablePopup();
});
});
Upvotes: 2
Views: 1410
Reputation: 4211
it is due to your event handler being registerd to listen to click on both your close and your background so change
$("#popupContactClose, #backgroundPopup").click(disablePopup);
to
$("#popupContactClose").click(disablePopup);
Upvotes: 1