Problem with centering my popup_问答_开发者_运维开发者技术经验分享

Updated with whole popup code

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var cid;
var hname;
var cname;
var cfname;
var ctstamp;

var popupCompareStatus = 0;

//loading popup with jQuery magic!
function loadComparePopup(){
//loads popup only if it is disabled
if(popupCompareStatus==0){
    $("#compareBackgroundPopup").css({
        "opacity": "0.7"
    });
    $("#compareBackgroundPopup").fadeIn("slow");
    $("#popupCompare").fadeIn("slow");
    popupCompareStatus = 1;
}
}

//disabling popup with jQuery magic!
function disableComparePopup(){
//disables popup only if it is enabled
if(popupCompareStatus==1){
    $("#compareBackgroundPopup").fadeOut("slow");
    $("#popupCompare").fadeOut("slow");
    popupCompareStatus = 0;
}
}

//centering popup
function centerComparePopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.cl开发者_开发百科ientHeight;
var popupHeight = $("#popupCompare").height();
var popupWidth = $("#popupCompare").width();
console.info("windowWidth="+windowWidth+", windowHeight="+windowHeight+"popupWidth="+popupWidth+", popupHeight="+popupHeight);


$("#popupCompare").css({
    position: "absolute",
    width: "800px",
    top: $(window).height()/2 - $("#popupCompare").outerHeight()/2,
    left: $(window).width()/2 - $("#popupCompare").outerWidth()/2
});

$("#compareBackgroundPopup").css("height", $(window).height());
}
var dummy1='<list>  <TagResult elementname="osname" subCategory="system" value1="Linux" value2="HP-US1000" isEqual="false"/>  <TagResult elementname="hostname" subCategory="system" value1="estilo" value2="benz" isEqual="false"/>  <TagResult elementname="release" subCategory="system" value1="2.6.18-128.el5" value2="B.11.23" isEqual="false"/><TagResult elementname="version" subCategory="system" value1="Red Hat Enterprise Linux Server release 5.3 (Tikanga)" value2="U" isEqual="false"/>  <TagResult elementname="machine" subCategory="system" value1="x86_64" value2="ia64 hp server rx2600" isEqual="false"/>  <TagResult elementname="bitmode" subCategory="system" value1="64" value2="64" isEqual="true"/>  <TagResult elementname="numberofcpu" subCategory="system" value1="4" value2="2" isEqual="false"/>  <TagResult elementname="cpuspeed" subCategory="system" value1=" 1862.890" value2="1400" isEqual="false"/>  <TagResult elementname="maxfilesperproc" subCategory="system" value1="32" value2=" 32" isEqual="true"/>  <TagResult elementname="maxthreadsperproc" subCategory="system" value1="2000000" value2="                    256  " isEqual="false"/><TagResult elementname="mempagesize" subCategory="system" value1="4096" value2="4096" isEqual="true"/><TagResult elementname="ssaname3webserviceserver" subCategory="product" value1="ssasvck&gt; Attempt 1 at server &apos;null:-1&apos;ssasvck&gt; Server&apos;null:-1&apos; is down" value2="ssasvck&gt; Attempt 1 at server &apos;null:-1&apos;ssasvck&gt; Server &apos;null:-1&apos; is down" isEqual="true"/><TagResult elementname="TERM" subCategory="envVariable" value1="xterm " value2="xterm" isEqual="true"/><TagResult elementname="JAVA_HOME" subCategory="envVariable" value1="/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32 " isEqual="false"/><TagResult elementname="SSANUL" subCategory="envVariable" value1="/dev/null " value2="/dev/null" isEqual="true"/><TagResult elementname="SSA_LIHOST" subCategory="envVariable" value1="estilo:45682 " value2="benz:7660" isEqual="false"/><TagResult elementname="SSH_CLIENT" subCategory="envVariable" value1="10.65.6.131 4760 22 " value2="10.65.241.204 367222" isEqual="false"/></list>';

$('#compareTable a').live('click', function() {
var elementId=$(this).attr("id");
showHiddenTr(elementId);
});
function showHiddenTr(eid)
{
if($(".differentEnvironmentHiddentr").is(':visible'))
{
    $(".differentEnvironmentHiddentr").hide();
}
else
{
    $(".differentEnvironmentHiddentr").show();
}        
}


function populateCompare(cmp)
{
var mytr = new Array();
var mytrs="";
var i=0;
var xml=dummy1;
$('#compareContent').empty();
$('#compareContent').html("<table width='100%'><tbody><tr><td align='center'>Compare details being loaded</td></tr><tr><td align='center'><img src='/csm/view/include/images/loading.gif' alt='Loading'/></td></tr></tbody></table>");
if(cmp=="all")
{

    $(xml).find('TagResult').each(function(){
        if($(this).attr("isEqual")=="false")
        {
            mytr[i]='<tr class="regulartr">'+
            '<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
            mytrs+=mytr[i++];
        }
        else
        {
            mytr[i]='<tr class="regulartr">'+
            '<td class="nametd" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="value1td" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="value2td" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
            mytrs+=mytr[i++];
        }

    });


    $('#compareContent').empty();
    $('<div>')
    .html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
            '<thead><tr class="regulartr">'+
                '<th align="center">Name</th>'+
                '<th align="center">Config1</th>'+
                '<th align="center">Config2</th>'+
            '</tr></thead><tbody>'+mytrs

        +'</tbody></table>')
    .appendTo('#compareContent');

} 
if(cmp=="diff")
{
    var env=0;
    $(xml).find('TagResult').each(function(){

        if($(this).attr("isEqual")=="false")
        {
            if($(this).attr("subCategory")=="envVariable")
            {
                if(env==0)
                {
                    mytr[i]='<tr class="regulartr">'+
                    '<td class="different" align="left"><a id="showCmpEnvironment"><img  src="http://pslxcsm01:8080/informaticaCSM/zkau/web/zul/img/tree/close.png"/>'+$(this).attr("subCategory")+'</a></td>'+
                    '<td class="different" align="left"></td>'+
                    '<td class="different" align="left"></td>'+
                    '</tr>';
                    mytrs+=mytr[i++];
                    mytr[i]='<tr class="differentEnvironmentHiddentr">'+
                    '<td class="different" align="left">&nbsp;&nbsp;'+$(this).attr("elementname")+'</td>'+
                    '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
                    '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
                    '</tr>';
                    mytrs+=mytr[i++];
                    env=1;
                }
                else
                {


                    mytr[i]='<tr class="differentEnvironmentHiddentr">'+
                    '<td class="different" align="left">&nbsp;&nbsp;'+$(this).attr("elementname")+'</td>'+
                    '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
                    '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
                    '</tr>';
                    mytrs+=mytr[i++];
                }
            }
            else
            {
                mytr[i]='<tr class="regulartr">'+
                '<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
                '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
                '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
                '</tr>';
                mytrs+=mytr[i++];
            }



        }


    });


    $('#compareContent').empty();
    $('<div>')
    .html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
            '<thead><tr class="regulartr">'+
                '<th align="center">Name</th>'+
                '<th align="center">Config1</th>'+
                '<th align="center">Config2</th>'+
            '</tr></thead><tbody>'+mytrs

        +'</tbody></table>')
    .appendTo('#compareContent');

} 
}



//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP

$("#btnCompare").click(function(event){
    var count=getCheckedCount();    
    if(count==2)
    {
        //show compare
        populateCompare("all");
        //centering with css
        centerComparePopup();
        //load popup
        loadComparePopup();
        //get configs



    }
    else if(count>2)
    {
        $("#messageBox").empty();
        $('<b>')
        .html('To compare select only two configurations')      
        .appendTo('#messageBox');

        $("#messageBox").fadeIn().delay(2000).fadeOut('slow');
    }           
    else
    {
        $("#messageBox").empty();
        $('<b>')
        .html('Please select two configurations to compare')        
        .appendTo('#messageBox');

        $("#messageBox").fadeIn().delay(2000).fadeOut('slow');
    }       
});

$('#compareForm input:radio').click(function() {
        populateCompare($(this).val());
  });

//CLOSING POPUP
//Click the x event!
$("#popupCompareClose").click(function(){
    disableComparePopup();
});
//Click out event!
$("#compareBackgroundPopup").click(function(){
    disableComparePopup();
});
//Press Escape event!
$(document).keypress(function(e){
    if(e.keyCode==27 && popupCompareStatus==1){
        disableComparePopup();
    }
});

});

Problem with centering my popup

Here is the screen shot you asked for

Problem with centering my popup

is there any image inside popup, as resizing popup width would result in resized width of image and eventually resized image height

-----Edit----

one thing you may do add this css to popup

.myPopUp
{
 height: whatever_you_like;
 overflow-y: auto;
}

now if height exceeds the height a scroll will appear, i hope this solves the issua

I think, you should add css style for #popupCompare before getting its height and width.

try this:

$("#popupCompare").css({
    position: "absolute",
    width: "80%",
    top: $(window).height()/2 - $("#popupCompare").outerHeight()/2,
    left: $(window).width()/2 - $("#popupCompare").outerWidth()/2
});

$("#compareBackgroundPopup").css("height", $(window).height());

Abhishek,

This is how I am doing center positioning of the modal in my app:

This will handle even if the window in scrolled position.

var winW = $(document).width(); 
if (winW % 2 > 0) winW = winW - 1;
$("#popupCompare").css('top', (($(window).height() / 2) - ($("#popupCompare").height() / 2) + $(document).scrollTop()));
$("#popupCompare").css('left', winW / 2 - $("#popupCompare").width() / 2);

Let me know if you find it useful.

Thanks

The best way for centering a popup is using CSS, not JavaScript. JavaScript comes handy, only when your situation gets really dynamic, like trying to respond the user's scroll, or creating some JavaScript ads on your site, and stuff like that. But this is a static situation. Please consider these guidelines for popup design:

Popup is just a simple modal dialog (overlay if you wish) to interact with user for a simple purpose, something like editing a simple record. So, if your popup gets big in dimensions and you get more and more controls and interactions in there, consider changing your design to redirect the user to another page, instead of popup.
There are two types of popup: 1) Modal, which means that unless user deal with the popup, he can't access the rest of the page. 2) Non-modal, which means that user still has access to the rest of the page, while interacting with popup.
Popups usually should be draggable, as there may be need for the user to drag the popup away, so (s)he can see the portion of the page covered by popup.
A popup should always have a close button somewhere (usually very explicit at the top right corner)

Now, my suggestion is to follow these steps:

Create a div element as the last element of body tag.
Absolutely position it with this CSS:

#screenCover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.5; // Consider using filter for Microsoft IE z-index: 9000; // Blocking access to the background page, while semi-visible }
Then create another div inside this screenCover div

popupContainer

{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 500px; /* This portion can be set dynamically / height: 300px; / can be set dynamically / margin: auto; / centering popup on background */ }
Now put your popup controls inside popupContainer.