如何在屏幕和叠加/背景的中心弹出式全屏幕高

我asp.net页面上工作。在母版页我有这样一个div：如何在屏幕和叠加/背景的中心弹出式全屏幕高

<body id="page1" > 
    <form id="form2" runat="server"> 
     <div id="content"> 
      <!-- this is popup light grey show --> 
      <div class="darkenBg" id="popupBackground" style="display:none;"></div> 

      <!-- content --> 

      <div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;"> 
       <div class="topWrap"> 
        <!-- popup window --> 
       </div> 
       <div class="botWrap"> 
        <div class="corner-bottom-left">&nbsp;</div> 
        <div class="border-bottom">&nbsp;</div> 
        <div class="corner-bottom-right">&nbsp;</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我显示它是这样的：

function ShowHomePagePopup(popupId) { 
    $("#" + popupId).show(); 
    $("#popupBackground").show(); 
    $('#popupBackground').height(800); 
    $("#page1").addClass('hideScrollbars'); 
}

CSS是这样的：

html, body { 
    height:100%; 
    margin:0px; 
} 
.darkenBg { /*added this div after body*/ 
    background: url(/images/blackBg.png); 
    position:absolute; 
    z-index:30; 
    width:100%; 
    height:100%; 
    bottom:0px; 
} 
.popUpWin { 
    position:absolute; 
    z-index:31; 
    width:500px; 
    left:50%; 
    margin:200px 0 0 -250px 
} 
.hideScrollbars { 
    overflow: hidden; 
} 
#content { 
    background:url(/images/bg.gif) top left repeat-x #fff; 
    overflow:hidden; 
    padding-bottom:20px; 
}

当弹出窗口，它是水平居中的，但垂直在顶部，因此它位于屏幕中间的顶部。
的重叠，浅灰色的背景，是指popupBackground只有10％的屏幕高度的宽度虽然是100％。我怎样才能让它100％高？

来源

2013-08-22 DotnetSparrow

http://jqueryui.com/dialog/ - >模态对话框 –

我不能使用jQuery UI的对话，因为我有我的自定义弹出式设计，虽然我使用jQuery来显示我的自定义弹出与.show方法。 – DotnetSparrow

@DotnetSparrow - 请参阅本[解决方案]（http://stackoverflow.com/questions/3202583/how-to-center-align-pop-up-div-using-javascript） –

将弹出窗口的叠加DIV里面！

<body id="page1" style="height: 100%;"> 

<form id="form2" runat="server" style="min-height: 100%;"> 
<div id="content"> 
.. 

content 

... 


</div> 
</div> 

<div class="darkenBg" id="popupBackground" style="display:none;"> 
     <div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;"> 
      <div class="topWrap"> 
      popup window 
      </div> 
      <div class="botWrap"> 
      <div class="corner-bottom-left">&nbsp;</div> 
      <div class="border-bottom">&nbsp;</div> 
      <div class="corner-bottom-right">&nbsp;</div> 
     </div> 
     </div> 
    </div> 
</form> 
</div>

来源

2013-08-22 06:25:04

放置叠加层内部和外部的标签！？ – DotnetSparrow

标签缺少代码格式并且没有显示 –

我无法移动div外侧窗体，因为它具有asp.net控件。 – DotnetSparrow

这是为了使一个弹出只用CSS的好方法：

的HTML代码：

<div class="container-popup"> 
    <div class="popup"></div> 
</div>

的CSS代码：

.container-popup { 
    position: relative; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,.8); 
} 

.popup { 
    width: 50%; 
    height: 50%; 
    background: #1abcb9; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
}

入住这Fiddle。

来源

2013-08-22 06:45:33 leoMestizo

真棒！ cool css trick – khurram

对于.container-popup，为什么是“position：relative;”其次是“职位：固定;”为此类定义指定？第一个位置属性是否被第二个位置属性定义替换？ – JohnH

有一个例子，以最简单的一种叠加弹出

LINK

$(document).ready(function(){ 
    $(".container-popup, #close").click(function(){ 
    $('.popup').hide(); $('.container-popup').hide(); 
    }); 
});

来源

2015-01-09 07:10:38

如何在屏幕和叠加/背景的中心弹出式全屏幕高

回答

相关问题