Javascript Bootstrap：覆盖加载屏幕 + 切换超大屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28797509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: overlay loading screen + toggle jumbotron
提问by user1770094
Ok so, I've gone through maybe 20 different stackexchange answers to each of these problems, and I still can't solve it, so it's about time I ask and hopefully somebody can point me out of these woods:
好的，对于这些问题中的每一个，我已经经历了大约 20 个不同的 stackexchange 答案，但我仍然无法解决它，所以是时候问了，希望有人能指点我走出这些困境：
I am making a simple website, and I wanted to make like an overlay screen that contains a loading/progress bar, and just progresses over the course of 3 seconds at most before it fades away and reveals the site. I also wanted to add a logo in the middle of it just above the bar. I looked at some video in arabic, but it got out of hand sort of, I didn't know what he was saying, but I thought I could try his code and modify it, but that didn't work either.
我正在制作一个简单的网站，我想制作一个包含加载/进度条的覆盖屏幕，并且最多只在 3 秒内进行，然后它就会消失并显示该网站。我还想在酒吧上方的中间添加一个标志。我看了一些阿拉伯语视频，但有点失控，我不知道他在说什么，但我想我可以试试他的代码并修改它，但这也不起作用。
Also, I've got a jumbotron in the code I call "jumbotronTwo", and basically what it is supposed to do is that when you click the menu icon and the dropdown menu appears, you click on one of the options, and then the menu should scroll back and the jumbotron should appear. So far I've just been able to make the jumbotron itself and color it, resize it, fill it with text etc., I tried using some javascript and jquery to make it appear and disappear "onclick", but none seemed to work, i'm starting to think maybe it has to do with what libraries I've got? I have no idea what could be trumping it, so I need somebody to take a look at the code.
另外，我在我称为“jumbotronTwo”的代码中有一个 jumbotron，基本上它应该做的是，当您单击菜单图标并出现下拉菜单时，您单击其中一个选项，然后单击菜单应向后滚动，并应出现超大屏幕。到目前为止，我只能制作超大屏幕本身并为其着色，调整其大小，用文本填充等，我尝试使用一些 javascript 和 jquery 使其出现和消失“onclick”，但似乎没有任何效果，我开始想也许这与我拥有的图书馆有关？我不知道什么可以胜过它，所以我需要有人来看看代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twenty Eight Interiors</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
I think these up here are important to show, in case I forgot some library or something so you can point it out. I've got some CSS as well but cut it out, if you need to see it too I can show it. Here's the "meat and potatoes":
我认为这里展示的这些很重要，以防我忘记了一些图书馆或其他东西，以便您指出。我也有一些 CSS，但是把它删掉了，如果你也需要看，我可以给你看。这是“肉和土豆”：
<body>
<!-- jumbotron-->
<div class="jumbotron" id="jumbotronOne">
<div class="container text-center">
<img src="Untitled.png">
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
<div class="container">
<div class="navbar-header" id="oneDiv">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<a href="" class="navbar-brand"><font color="white">MENU</font></a>
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse" align="center">
<ul class="nav navbar-nav" id="firstOne">
<li><a href="#" id="designProcess" role="button">Design Process</a></li>
<li><a href="#" id="profile">Profile</a></li>
<li><a href="#" id="contactInfo">Contact Info</a></li>
</ul>
<ul class="list-inline" id="secondOne">
<li><a href="#" class="socialicon"><img src="facebook.png" hspace="30"></a></li>
<li><a href="#" class="socialicon"><img src="twitter.png" hspace="30"></a></li>
<li><a href="#" class="socialicon"><img src="instagram.png" hspace="30"></a></li>
</ul>
</div>
</div><!-- End Container img src="twitter.png"-->
</nav><!-- End navbar -->
<div class="jumbotron" id="jumbotronTwo">
<div class="container">
<h2>Headline goes here in one, two or three lines like this</h1>
<p>...</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I even had problems with making the javascript work for the glyphicon, I want it to change when I click it, and again; i have no idea what I'm doing wrong, tried lots of potential solutions from stackexchange, but this too seems to point to that it's something else.
我什至在让 javascript 为 glyphicon 工作时遇到了问题，我希望它在我点击它时改变，然后再一次；我不知道我做错了什么，从 stackexchange 尝试了很多潜在的解决方案，但这似乎也表明它是别的东西。
Thanks in advance
提前致谢
回答by DevFox
If it's just a splash page then add a div at the top of your body and wrap your existing page in a div with display:none...
如果它只是一个启动页面，那么在你的身体顶部添加一个 div 并将你现有的页面包装在一个带有 display:none 的 div 中...
<body>
<div id="loader">
<h4>Logo and progress bar here...</h4>
</div>
<div id="your-page" style="display:none">
<!--Your existing content here...-->
</div>
Then add a little jquery...
然后加一点jquery...
jQuery(document).ready(function(){
$( "#loader" ).delay(800).fadeOut(400, function(){
$( "#your-page" ).fadeIn(400);
});
});
See working example here.
请参阅此处的工作示例。
If you want to make animating your progress bar easy then I recommend this plugin.
如果你想让你的进度条动画变得容易，那么我推荐这个插件。
For the glyphicon use the following js...
对于字形使用以下js ...
$( "#iconButton" ).click(function(){
$(this).html('<span class="glyphicon glyphicon-menu-cheeseburger"></span>');
});
Obviously replace the cheeseburger with whatever icon you want to use! See fiddle herefor this bit (without the actual icons but you should get the idea).
显然，用你想使用的任何图标替换芝士汉堡！请参阅此处的小提琴（没有实际图标，但您应该明白这一点）。
回答by Jorim Tielemans
I see you are loading both jQuery 1.11.2 and 2.1.3, which adds additional loading time as well. This is of course not good and I would suggest just using 3.1.1
我看到您正在加载 jQuery 1.11.2 和 2.1.3，这也增加了额外的加载时间。这当然不好，我建议只使用 3.1.1
In that case @DevFox second code would need to be updated as following, since (document).readyis not supported anymore.
在这种情况下，@DevFox 第二个代码需要更新如下，因为(document).ready不再支持。
$(function(){
$( "#loader" ).delay(800).fadeOut(400, function(){
$( "#your-page" ).fadeIn(400);
});
});
