如果正确答案,身体负荷!有任何想法吗?

时间:2012-08-16 17:49:54

标签: javascript jquery if-statement onload cover

伙计我在我的网站上找不到办法。 我需要覆盖整个网站的东西(可以是黑色背景或图像的div,无论如何),然后在身体加载之前出现问题。

此人在输入上输入答案并提交,如果答案正确(答案可以在html上显示),那么身体加载,或者覆盖页面的黑色背景的div消失,显示网站。

任何覆盖网站的内容,只会在输入某个字词后加载正文。 有谁能够帮我? :(

6 个答案:

答案 0 :(得分:1)

您使用jQuery标记了此问题,因此我将建议使用modal=true建立一个jQuery对话框。

请参阅jQuery网站上的模式表单的example。您可以从$(document).ready块打开对话框,只有在用户在表单中输入正确的值时才关闭它。

请注意,知道如何使用浏览器开发人员工具栏的用户可以绕过您提出的任何内容。

答案 1 :(得分:1)

好吧,我认为你需要使用服务器端脚本来做类似的事情......
例如,使用php,asp,python等验证答案

答案 2 :(得分:1)

制作一个HTML页面,其中包含您想要提出的问题或您想要的任何其他内容。

设置一个提交按钮,其中包含对servlet的操作,当用户在回答您的问题后点击提交按钮时,如果答案为真,您将检查servlet,request.getParameter
并且您将设置一个URL到您网站的第一页,
 如果它是假的,你会将URL设置为他所在的第一页......

答案 3 :(得分:0)

您可以使用display: none隐藏身体的其余部分(包含在div中),并在答案正确时更改该属性。

使用模态是另一种选择,在$(function(){})document.ready块中使用jQueryUI。

答案 4 :(得分:0)

不要认为它会阻止身体加载,然后在人们输入答案后允许它。从两个<div>开始,一个包含问题,另一个包含正文内容。最初隐藏“正文”div并在用户回答问题后显示它。

您的问题将在body标记内,因此您无法隐藏整个body

答案 5 :(得分:0)

请参阅http://jsfiddle.net/AMVA3/

您可以将以下代码添加到<head>,以便在加载<body>之前执行:

var ask=prompt('Write answer here:',"answer");
if(ask!="answer"){
    //If the answer is wrong, we stop the document's loading
    if(window.stop){
        window.stop();
    }else if(document.execCommand){
        document.execCommand('Stop');
    }else{
        document.write('<!--');
    }
}

因此,当您提出问题时,页面只是白色,因为尚未加载正文。 如果答案是正确的,则文档继续加载。如果没有,它会停止加载。

注意:我已经从How to stop page load in html static page

获取了阻止文档加载的代码

修改

如果您想提醒“错误答案!”,请在检查是否错误后再添加。

请在此处查看:http://jsfiddle.net/AMVA3/1/

var ask=prompt('Write answer here:',"answer");
if(ask!="answer"){
    alert("Wrong answer!!");
    if(window.stop){
        window.stop();
    }else if(document.execCommand){
        document.execCommand('Stop');
    }else{
        document.write('<!--');
    }
}

编辑2:

前面的代码警报不适合您,这很奇怪。对我来说它有效。

但是如果你想避免只加载一个div,你可以使用注释。

请在此处查看:http://jsfiddle.net/AMVA3/3/

HTML:

<div class="a">
    You should se me
</div>
<div id="cover"></div>
<script type="text/javascript">
var wrongAnswer=prompt('Write answer here:',"answer")!="answer";
document.getElementById('cover').style.display='none';
if(wrongAnswer){
    alert("Wrong answer!!");
    document.write('<!--');
}
</script>
<div class="a hide">
    If you see me, you have written the right answer!
</div>
<script type="text/javascript">
if(!wrongAnswer){
    document.write('<!-- ');
}
</script>
-->
<div class="a">
    You should see me too
</div>

CSS:

#cover{position:fixed;top:0;left:0;height:100%;width:100%;
    background:yellow;/* Set it to the color that you want */
}