将弹出窗口居中的问题
使用整个弹出式代码更新
//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.clientHeight;
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> Attempt 1 at server 'null:-1'ssasvck> Server'null:-1' is down" value2="ssasvck> Attempt 1 at server 'null:-1'ssasvck> Server 'null:-1' 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"> '+$(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"> '+$(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();
}
});
});
以下是您要求的屏幕截图
5 个答案:
答案 0 :(得分：2)
弹出内部是否有任何图像，因为调整弹出宽度会导致图像宽度调整并最终调整图像高度
<强> ----- ----编辑
你可以做的一件事就是将这个css添加到弹出窗口
.myPopUp
{
height: whatever_you_like;
overflow-y: auto;
}
现在如果高度超过高度，则会出现滚动，我希望这可以解决问题
答案 1 :(得分：1)
我认为，在获得高度和宽度之前，你应该为#popupCompare添加css样式。
答案 2 :(得分：0)
试试这个：
$("#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());
答案 3 :(得分：0)
阿布舍克巴克，
这就是我在我的应用程序中对模态进行中心定位的方法：
即使窗口处于滚动位置，也会处理。
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);
如果您发现它有用，请告诉我。
由于
答案 4 :(得分：0)
以弹出窗口为中心的最佳方法是使用CSS，而不是JavaScript。 JavaScript非常方便，只有当您的情况变得非常动态时，例如尝试回复用户的滚动，或在您的网站上创建一些JavaScript广告等等。但这是一个静态的情况。请考虑弹出设计的这些指南：
- 弹出窗口只是一个简单的模态对话框（如果您愿意，可以叠加）与用户交互以实现简单目的，例如编辑简单记录。因此，如果您的弹出窗口尺寸变大，并且您在其中获得越来越多的控件和交互，请考虑更改您的设计以将用户重定向到另一个页面，而不是弹出窗口。
- 有两种类型的弹出窗口：1）模态，这意味着除非用户处理弹出窗口，否则他无法访问页面的其余部分。 2）非模态，这意味着用户仍然可以访问页面的其余部分，同时与弹出窗口进行交互。
- 弹出窗口通常应该是可拖动的，因为用户可能需要拖动弹出窗口，因此他可以看到弹出窗口覆盖的部分。
- 弹出窗口应该总是有一个关闭按钮（通常在右上角非常明确）
- 创建一个div元素作为
body标记的最后一个元素。 -
使用此CSS绝对定位：
#screenCover { 位置：绝对; 顶部：0; 右：0; 底部：0; 左：0; 不透明度：0.5; //考虑使用Microsoft IE过滤器 z-index：9000; //阻止访问背景页面，同时半可见 }
-
然后在此
中创建另一个divscreenCoverdivpopupContainer
{ 位置：绝对; 顶部：0; 右：0; 底部：0; 左：0; 宽度：500px; / *这部分可以动态设置 / 身高：300px; / 可以动态设置 / 保证金：自动; / 在背景上居中弹出* / }
-
现在将弹出控件放在
popupContainer。 中
现在，我的建议是遵循以下步骤：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？