CODEWITHSUNDEEP
jquery
Nick Kahn
Nick Kahn

Reputation: 20078

How to retain focus until closed the popup window

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

Answers (1)

AbstractChaos
AbstractChaos

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

Related Questions