みんな私のウェブサイトでこれを行う方法を見つけることができません。ウェブサイト全体をカバーするものが必要です(背景が黒のdivでも画像でもかまいません)。ボディが読み込まれる前に質問が表示されます。
その人は入力に答えを入力して送信します。答えが正しければ(答えはhtmlに表示されます)、ボディが読み込まれるか、ページを覆っている黒い背景のdivが消えてWebサイトが表示されます。
ウェブサイトをカバーし、特定の単語を入力した後にのみ本文をロードするもの。誰か助けてもらえますか?:(
みんな私のウェブサイトでこれを行う方法を見つけることができません。ウェブサイト全体をカバーするものが必要です(背景が黒のdivでも画像でもかまいません)。ボディが読み込まれる前に質問が表示されます。
その人は入力に答えを入力して送信します。答えが正しければ(答えはhtmlに表示されます)、ボディが読み込まれるか、ページを覆っている黒い背景のdivが消えてWebサイトが表示されます。
ウェブサイトをカバーし、特定の単語を入力した後にのみ本文をロードするもの。誰か助けてもらえますか?:(
この質問にjQueryのタグを付けたので、を使用してjQueryダイアログを提案しmodal=true
ます。
jQueryのサイトにあるモーダルフォームの例を参照してください。ブロックからダイアログを開き、$(document).ready
ユーザーがフォームに正しい値を入力した場合にのみダイアログを閉じます。
ブラウザの開発者ツールバーの使用方法を知っているユーザーは、思いついたものをすべてバイパスできることに注意してください。
そうですね、そのようなことを行うにはサーバーサイドスクリプトを使用する必要があると思います...
たとえば、php、asp、pythonなどを使用して回答を検証します。
質問したい質問やその他の質問を含むHTMLページを作成します。
サーブレットへのアクションを含む送信ボタンを設定します。ユーザーが質問に回答した後に送信ボタンを押すと、回答がtrueであるかどうかサーブレットをチェックインし、request.getParameter
URLを最初に設定します。あなたのウェブサイトのページ、
そしてそれが偽の場合、あなたは彼がいた最初のページにURLを設定します...
display: none
答えが正しければ、を使用して本文の残りの部分(divで囲まれている)を非表示にし、その属性を変更できます。
$(function(){})
モーダルの使用は、またはdocument.ready
ブロックでjQueryUIを使用する別のオプションです。
体がロードされるのを防ぎ、人が答えを入力した後にそれを許可することとは考えないでください。2つのsから始め<div>
ます。1つは質問を含み、もう1つは本文の内容を含みます。最初は「本体」div
を非表示にし、ユーザーが質問に答えた後に表示します。
質問はbodyタグ内にあるため、全体を非表示にすることは意味がありませんbody
。
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('<!--');
}
}
したがって、質問をしている間、本文がロードされていないため、ページは白のみです。答えが正しければ、ドキュメントの読み込みが続行されます。そうでない場合は、ロードを停止します。
注:HTML静的ページでページの読み込みを停止する方法からドキュメントの読み込みを停止するコードを取得しました
編集:
「間違った答えです!」と警告したい場合は、間違っているかどうかを確認してから追加してください。
こちらをご覧ください: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 */
}