JavaScript: Overlay函数
JavaScript: Overlay函数
提问于 2017-02-28 14:18:34
我对javascript和Jquery还是个新手，所以我真的对自己在做什么知之甚少。在这个过程中，我通过一些试验和错误，成功地完成了大部分工作。我不确定有没有比javascript更好的替代品。我知道用户可以关闭javascript，这可能是这个脚本的一个问题，但如果可能的话，我真的不想使用PHP/服务器端的东西。
这就是我遇到的问题，我在控制台中没有得到任何错误，脚本一直在运行，但第一个部分不起作用。
我有一个.hidden和.visible CSS类，在紧跟在html后面的div中有一个ID，因为只有这样它才能覆盖屏幕上的所有内容。
太晚了，我可能要到明天才能回复。
$(function() {
var loading = function() {
var overlay = document.getElementById('overlay .hidden')
overlay.onclick = function() {
overlay.setAttribute('class', 'visible');
};
};
loading()
});这是整个脚本。
$(window).bind("load", function() {
$('a[href^="http://"],a[href^="https://"]')
.not('[href*="localhost"]')
.click(function(e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$(function() {
var loading = function() {
var overlay = document.getElementById('overlay .hidden')
overlay.onclick = function() {
overlay.setAttribute('class', 'visible');
};
};
loading()
});
setTimeout(function(){
window.location = goTo;
},7000);
});
});HTML位
<html lang="en">
<div id="overlay .hidden" class="overlay"></div>
<head>CSS
.hidden {
display: none;
}
.visible {
display: block;
}
#overlay {
display: inline;
z-index: 99999999999;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-01 02:23:17
我发现我的源码中缺少一个ajax libs href代码，所以我把它添加到了我的头文件中。我还在我的原始代码中添加了可以工作的代码。由于我使用的是ajax源代码，所以它不会将覆盖作为脚本的一部分。
感谢所有回复的人，尽管它在这种情况下没有特别的帮助，我学到了很多。
$(window).bind("load", function() {
$('a[href^="http://"],a[href^="https://"]')
.not('[href*="localhost"]')
.click(function(e) {
e.preventDefault(); // prevent default anchor behavior
var goTo = this.getAttribute("href");
$(function() {
var loading = function() {
// add the overlay with loading image to the page
var over = '<div id="overlay">' +
'<img id="loading" src="">' +
'<a style="color:white; text-align:center"> This is test </a>'+
'</div>';
$(over).prependTo('body');
};
loading()
});
setTimeout(function(){
window.location = goTo;
},7000);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42501567
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号