如何将模糊屏幕设置为全页，并在点击页面转到TOP [英] how to set blur screen to full page and at click page go to TOP

问题描述

CSS1工作：

  .parentDisable 
 {
 z-index：2000; 
 width：100％; 
 height：100％; 
 display：none; 
 position：absolute; 
 
 left：0; 
 background：url（/images/btrans.png）repeat; 
 color：#aaa; 
} 
 #popup 
 {
 width：300px; 
 height：auto; 
 position：absolute; 
 background-color：whitesmoke; 
 color：＃6699ff; 
 top：40％; 
 left：40％; 
} 
  

CSS2未运作：

  display：none; 
 z-index：2000; 
 position：absolute; 
 width：100％; 
 top：0; 
 left：0; 
 background：＃000; 
 opacity：0.5; 
 filter：alpha（opacity = 50）; 
   
 
 
 
 HTML 
 < div id =pop1class =parentDisable> 
< center> 
< div id =popup> 
< div id =loading> < / div> 
< div id =popupTextalign =left> < / div> 
< a href =＃onClick =return hidePopup _（'pop1'）> 
< img style =position：absolute; top：0; right：0alt =closesrc =/ images / close.pngwidth =40pxheight =40px/> 
< / a> 
< / div> 
< / center> 
< / div> 
  
使用CSS1我有这个但不是完全 HEIGHT 当前滚动位置不在TOP不在BOTTOm 
当我点击链接我的页面转到顶部并显示为图像。 
  
  UPDATE1 ：
 
剩余的是不滚动页面向上|顶部 
当我点击链接页面向上滚动到TOP。 
脚本：
  //设置全页高度
 var hei = document.body.offsetHeight; 
 $（'＃pop1'）。css（{height：hei +'px'}）; 
  
 
 
解决方案
而不是 position：absolute 使用 position：fixed 。
 
 
 
为了防止页面跳转到顶部，您需要在您的JavaScript函数 hidePopup _ 中包含 return false 。
 
 
 
链接trys跳转到锚点＃，因为没有一个，它跳到顶部。
 
CSS1 worked: 
.parentDisable
{    
        z-index:2000;
        width:100%;
        height:100%;
        display:none;
        position:absolute;

        left:0;
        background: url(/images/btrans.png) repeat;
        color: #aaa;
}
#popup
{
    width:300px;
    height:auto;
    position:absolute;
    background-color: whitesmoke;
    color: #6699ff;
    top:40%;
    left: 40%;
}
CSS2 Not worked:
    display:none;
    z-index:2000;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50); 
HTML
<div id="pop1" class="parentDisable">
            <center>
                <div id="popup">
                    <div id="loading"> </div>
                    <div id="popupText" align="left"> </div>
                    <a href="#" onClick="return hidePopup_('pop1')" >
                        <img style="position: absolute;top: 0;right: 0" alt="close" src="/images/close.png" width="40px" height="40px"/>
                    </a>
                </div>
            </center>
</div>
with CSS1 i got this but not full HEIGHT and i want this at current scroll position not at TOP not at BOTTOm
when i click on link my page goes to top and display as in image.

UPDATE1 :

Remaining is not to scroll page up|Top
when i click on link page scroll-up to TOP.
Script :
// set full page height
    var hei = document.body.offsetHeight;
    $('#pop1').css({height: hei +'px'});

解决方案
Instead of position: absolute use position: fixed.

To prevent the page from jumping to top you need to include a return false within your javascript-function hidePopup_.

The link trys to jump to the anchor # and since there isn't one, it jumps to the top.

                        
这篇关于如何将模糊屏幕设置为全页，并在点击页面转到TOP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！