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

我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

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

回答

相關問題