Question

i have created a transparent popup with a text box.but the transparent window is of fixed size. i want to increase size of transparent popUp according to html page on which show popUp.

i have used this script :
http://www.pat-burt.com/csspopup.js

style used is:

#blanket {
    background-color:#111;
    opacity: 0.65;
    filter:alpha(opacity=65);
    position:absolute;
    z-index: 9001;
    top:0px;
    left:0px;
    width:100%;
}
#popUpDiv {
    position:absolute;
    background-color:#eeeeee;
    width:300px;        
    height:300px;
    z-index: 9002;
}

i am using this script for onload() event

please help and provide some advice or reference.

Thanks to all

Answer 1

The script needs to be re-written to allow for a dynamic popupDiv size, be it a percentage or simply a larger fixed value.

The lines causing problems are:

 24    popUpDiv_height=blanket_height/2-150;//150 is half popup's height

and

 43     window_width=window_width/2-150;//150 is half popup's width

In my revised script I changed said lines to:

 23     var popUpDiv = document.getElementById(popUpDivVar);
 24     
 25     // We have to take popup div's height dynamically
 26     var revertHidden = false
 27     if (popUpDiv.style.display == "none") {
 28         // Since it's hidden, show it first
 29         popUpDiv.style.display = "block"; 
 30         revertHidden = true
 31     }
 32     popUpDiv_height=blanket_height/2 - popUpDiv.offsetHeight/2
 33     if (revertHidden) {
 34         // We have to hide it again
 35         popUpDiv.style.display = "none"
 36     }

and

 56     // Here we also need popup div's width dynamically
 57     var revertHidden = false
 58     if (popUpDiv.style.display == "none") {
 59         // Since it's hidden, let's show it
 60         popUpDiv.style.display = "block";
 61         // store that it we have to revert to hidden
 62         revertHidden = true;
 63     }
 64 
 65     // here we use offsetWidth
 66     window_width=window_width/2- popUpDiv.offsetWidth/2
 67     // if it was originally hidden, hide it again
 68     if (revertHidden) {
 69         popUpDiv.style.display = "none";
 70     }

You can use element.offsetHeight and element.offsetWidth to get the height and width of an element, respectively. Thing is, the element needs to be displayed in order to have a height and width. That’s why you have to display it first if it’s not displayed, take the measurement needed, and quickly hide it again. It will occur fast enough such that the user will not notice.

Once you have that, then the CSS can become (for example):

#popUpDiv {
    position:absolute;
    background-color:#eeeeee;
    /* Notice we're using a percentage for the height and width */
    width:50%;
    height:50%; 
    z-index: 9002;
}

EDIT: I’ve updated the code to take into account window resizing. I’ve added a function called window_resize which gets called when the window is resized while the popUp is being displayed. I’ve also decided to play nice and store any existing onresize callback before overwriting it, call it after my window_resize function executes, and restore it when the popup is no longer being displayed.

function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);

    // Store any previous callback (let's play nice)
    if (window.onresize && window.onresize != window_resize) {
        window_resize.previousCallback = window.onresize;
    }
    // decide if we're going to set window_resize or restore a previousCallback
    var toggledCallback = window.onresize != window_resize ? window_resize : window_resize.previousCallback
    // Set the onresize handler
    window.onresize = toggledCallback
    // set the name of the popupDiv so we can access it from window_resize
    window_resize.popupDiv = windowname;
}

// This wiil handle our resize event
var resizeTimeoutId;
function window_resize(event) {
    window.clearTimeout(resizeTimeoutId);
    resizeTimeoutId = window.setTimeout(function() {
        // resize the blanket
        blanket_size(window_resize.popupDiv);
        // reposition the popup
        window_pos(window_resize.popupDiv);
        // Call the previous onresize callback (if there is one);
        if (window_resize.previousCallback) window_resize.previousCallback.call(window, event);
    }, 10)
}

I’ve also updated the example at http://so.savantcoding.com/csspopup/. Again the the javascript is viewable at http://so.savantcoding.com/csspopup/csspopup.js