Question

所以我创建了一个网站，用于寻找我正在接收的寻宝者，但我需要一个密码提示，几乎每个页面都会出现，以确保他们已经完成了继续挑战。我正在使用Jquery，并且获取密码promt的唯一方法是刷新页面后，这是不好的。我需要一种方法将一个页面链接到另一个页面，并在他们看到页面之前显示密码提示。这是重要的HTML。另外，如果可以的话。每当我刷新页面时，所有的css似乎都消失了，我就离开了文本。如果你能帮忙的话。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery</title>
      <link rel="stylesheet" href="../themes/scavenger-hunt.min.css" />
    <link rel="stylesheet" href="../Publish/jquery-mobile/jquery.mobile.structure-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
  <body> 
<script language="javascript">
var password
var pass1="123"

password=prompt('Please enter password to view page')
if (password==pass1)
alert('password correct! Press ok to continue.')

else{
  window.location="index.html";
  alert('password incorrect! Redirecting')
}

</script>
<div data-role="page" id="home">
  <div data-role="header">
    <h1>Hint 1</h1>

  </div>

Answer 1

有几种方法可以解决这个问题，但这里有两种方法。一个比另一个容易。我这样做的第一种方法是在页面上包含所有内容，但在页面加载时隐藏它。如果输入的密码正确，则会显示该页面。

body { display:none; }

if (password == pass1) { $('body').show(); }

http://jsfiddle.net/5JyTy/

另一种是使用AJAX，只有在密码实际正确的情况下才请求/显示内容。

if (password == pass1) { $('body').load('ajax/test.html'); }

Answer 2

你可以使用ajax调用和jquery msg插件，它很简单

http://dreamerslab.com/blog/en/jquery-blockui-alternative-with-jquery-msg-plugin/

需要创建jquery密码提示（应该很简单）

2 个答案: