- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个叠加层和模式,在使用 Ajax 的长时间请求期间显示微调器。但是,当加载程序在请求期间显示时,它会丢失它的 position: fixed;
css 属性。因此用户可以向下滚动并查看下面的内容。我怎样才能防止这种情况发生?我还尝试在两者之间添加一个 div,以防止用户在处理请求时单击叠加层下方的按钮,但也没有成功。关于如何改进的任何提示?这是 html:
<div class="Progress" style="display:none" aria-hidden="true" role="dialog">
<div class="overlay"></div>
<div class="modal" role="document" tabindex="-1">
<h3>{% trans 'Please wait...' %}</h3>
<div id="spinner">
<div class="lds-css ng-scope">
<div class="lds-spinner" style="width:100%;height:100%">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div>
</div>
</div>
</div>
和相关的CSS:
.Progress {
height: 100%;
width: 100%;
position: fixed;
z-index:1000;
}
.overlay {
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
text-align: center;
position: fixed;
z-index:1001;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
float: none;
}
.modal {
width: 20rem;
padding: 16px;
top:40%;
position: relative;
z-index:1002;
overflow: auto;
text-align: center;
margin: auto;
float: none;
h3{
font-family: helvetica;
font-size:1.5rem;
text-align: center;
margin:0;
}
p{
font-family: helvetica;
font-size:1.5rem;
color: #000;
margin:0;
}}
#spinner {
height: 5rem;
width: 5rem;
margin:auto;
float:none;
}
如果您需要更多信息,请告诉我。
最佳答案
在显示微调器和叠加层的函数中,您还可以向主体添加一个类:
.bodyNoScroll {max-height:100vh;overflow:hidden;}
然后,当您隐藏微调器和叠加层时,从正文中删除该类
$('body').removeClass('bodyNoScroll');
$('body').addClass('noScroll');
$('#msg, #olay').fadeIn(1500);
$('button').click(function(){
$('#msg, #olay').fadeOut();
$('body').removeClass('noScroll');
});
#msg, #olay{position:absolute;}
#msg{position:5vh;left:15vh;padding:30px;background:wheat;font-size:1.3rem;z-index:2;display:none;}
#olay{top:0;left:0;width:98vw;height:98vh;background:black;opacity:0.5;z-index:1;display:none;}
.noScroll{max-height:99vh;overflow:hidden;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="msg">Spinner!<button>Close</button></div>
<div id="olay"></div>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
关于html - 如何改进在请求期间显示微调器的叠加层和模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55431694/
我对编码还比较陌生,但并非完全没有经验。处理有关金融计算器的学校作业。如果你们中的任何人可以查看我的代码以了解不良做法/可能的改进等,那就太好了。 我确实添加了一个“动画”启动(有很多 printf
小目标Trick 论文链接: https://paperswithcode.com/paper/slicing-aided-hyper-inference-and-fine-tuning 代码链接:h
if (firstPositionCpc && (firstPosition > 0 && firstPositionCpc 0 && topOfPageCpc 0 && firstPageCpc
我有 2 个表:“packages”和“items”。 “packages”有以下列:pack_id | item_id “items”有以下列......:item_id |输入 一个包可以有多个
我目前有一个 Pandas Dataframe,我在其中执行列之间的比较。我发现一种情况,在进行比较时存在空列,由于某种原因比较返回 else 值。我添加了一个额外的语句来将其清理为空。看看我是否可以
我正在处理一个查询,通过首先舍入它们的主要日期时间键来连接一个数据库中的多个表。数据库包含来自 openhab 的性能数据,每个表只有一个名为 Time 的主日期时间行和一个名为 Value 的值行。
问候 我有一个程序创建一个类的多个实例,在所有实例上运行相同的长时间运行的 Update 方法并等待完成。我从 this question 开始关注 Kev 的方法将更新添加到 ThreadPool.
我想在下学期的类(class)中取得领先,所以我制作了这个基本版本的 Blackjack 来开始理解 C 的基础知识,我希望您有任何想法可以帮助我更好地理解 C 和其正常的编码实践。 C 中的很多东西
我有一个要求,比如: 给定一个数组,其中包含随机数。需要输出元素出现的次数,有自带解决方案: var myArr = [3,2,1,2,3,1,4,5,4,6,7,7,9,1,123,0,123];
这是我的数据库项目。 表user_ select id, name from user_; id | name ----+---------- 1 | bartek 2 | bartek
我已经完成了一个小批量脚本来调整(动态)一些图像的大小: for a in *.{png,PNG,jpg,JPG,jpeg,JPEG,bmp,BMP} ; do convert "$a" -resiz
是否有更 pythonic 的方法来执行以下代码?我想在一行中完成 parsed_rows 是一个可以返回大小为 3 或 None 的元组的函数。 parsed_rows = [ parse_row(
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
下面的代码完成了我想要的,但还有其他更像 python 风格的方式吗? 文件格式: key1:value1,key2:value2,... key21:value21,key22:value22,..
如果两个英文单词只包含相同的字母,则它们是相似的。例如,food 和 good 不相似,但 dog 和 good 相似。 (如果A与B相似,则A中的所有字母都包含在B中,B中的所有字母都包含在A中。)
我有以下结构来表示二叉树: typedef struct node *pnode; typedef struct node { int val; pnode left; pnode
我有一个区域,它由受约束的 delaunay 三角剖分表示。我正在解决在两点之间寻找路径的问题。我正在使用 Marcelo Kallmann 提供的论文作为解决此问题的引用点。然而,而不是使用 Kal
如果我需要检查文本(字符串)中是否存在单词 A 或单词 B,如果我这样做会有性能差异: if(text.contains(wordA) || text.contains(wordB)) 要使用一些正则
Adjust To 我有上面这个简单的页面,上面有一个标签和一个文本框。我想在文本框中输入文本。 对我有帮助的 XPATH 是 //*[contains(tex
以下伪代码的elisp代码 if "the emacs version is less than 23.1.x" do something else something-else 写成 (if
我是一名优秀的程序员,十分优秀!