Javascript 如何在屏幕中央弹出并覆盖/背景至全屏高_Javascript_Jquery_Asp.net_Css

Javascript 如何在屏幕中央弹出并覆盖/背景至全屏高

javascript jquery asp.net css

Javascript 如何在屏幕中央弹出并覆盖/背景至全屏高,javascript,jquery,asp.net,css,Javascript,Jquery,Asp.net,Css,我正在asp.net页面上工作。在母版页中，我有这样一个div： <body id="page1" > <form id="form2" runat="server"> <div id="content">  <div class="darkenBg" id="popupBackground" s

我正在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');
}

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;
}

css是这样的：

<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');
}

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%高

将弹出窗口放在叠加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>


..
内容
...
弹出窗口

这是一种只使用CSS创建弹出窗口的好方法：

HTML代码：

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

选中此项

有一个简单的叠加弹出窗口示例

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

-->模态对话框我不能使用jquery ui对话框，因为我有自己的自定义弹出窗口设计，尽管我使用jquery以.show方法显示自定义弹出窗口。@DotnetSparrow-请看这个，我如何使覆盖高度达到100%？很抱歉上一篇文章。我只是修正我的答案。希望它能帮助你！将覆盖层放置在标签内外？我无法将div移出窗体，因为它有asp.net控件。然后，您必须将窗体标记的最小高度设置为100%，并将上盖保持在窗体内。但是把弹出窗口放在你的叠加div里面！如果将弹出框设置为position fixed（位置固定），则即使页面可滚动。container popup（容器弹出），它也会保持其位置，为什么要为此类定义指定“position:relative；”后跟“position:fixed；”？第一个位置属性不被第二个位置属性定义替换吗？