Javascript CSS模式windows闪存加载
我想做一个纯CSS模式窗口,我发现。 我的问题是模式窗口很快显示,然后在加载时消失。当我停下来的时候,一切都很好。当我尝试使用示例olone时,效果非常好,但是当我将其嵌入到我的大型代码中时,我看到这个闪烁的模式窗口 我怎样才能停止它来进行闪存加载 HTMLJavascript CSS模式windows闪存加载,javascript,css,Javascript,Css,我想做一个纯CSS模式窗口,我发现。 我的问题是模式窗口很快显示,然后在加载时消失。当我停下来的时候,一切都很好。当我尝试使用示例olone时,效果非常好,但是当我将其嵌入到我的大型代码中时,我看到这个闪烁的模式窗口 我怎样才能停止它来进行闪存加载 HTML 我把你的小提琴改了一点。我没有转换不透明度,而是将转换放在背景上,从 background: rgba(0,0,0,0.0); 到 我还完全删除了不透明度。希望这将在您的环境中起作用 Fiddle:听起来这是你庞大代码的问题,而不是你粘贴
我把你的小提琴改了一点。我没有转换不透明度,而是将转换放在背景上,从
background: rgba(0,0,0,0.0);
到
我还完全删除了不透明度。希望这将在您的环境中起作用
Fiddle:听起来这是你庞大代码的问题,而不是你粘贴的代码的问题。也许可以看看调试器工具中的“网络”选项卡,看看加载css文件是否有延迟?我想是的,我删除了所有的.js文件,但我遇到了同样的问题。css加载正常。是否在所有浏览器中都失败?也许可以尝试将.modalDialog设置为position:static,我已经读到这里的固定位置可能存在潜在问题:yes在所有浏览器中都失败。
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
background: rgba(0,0,0,0.0);
background: rgba(0,0,0,0.8);