javascript 使用 jQuery 锁定和解锁页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11603296/
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
Lock and unlock page with jQuery?
提问by Paul Jeggor
<body>
<span id="lock">lock</span>
<div id="one">test test</div>
<div id="three" style="display: none">hide</div>
<span id="two">test</span>
<div id="div_lock">
Enter password: <input type="password"> <input type="button" value="unlock" id="unlock">
</div>
</body>
$('#lock').click(function(){
$('#div_lock').show();
//????
})
$('#unlock').click(function(){
$('#div_lock').hide();
//????
})
if i click LOCK then i would like open div_lock and hide all other elements in page. And if i click unlock then hide div_lock and show previous elements.
如果我点击 LOCK 那么我想打开 div_lock 并隐藏页面中的所有其他元素。如果我点击解锁然后隐藏 div_lock 并显示以前的元素。
Can i use other function than .hide? If i use hide then is possible to check SOURCE code. Maybe any variables with SIMPLE hash etc? If not how can i make this with .hide() and show()? I can use also PHP and Ajax
我可以使用 .hide 以外的其他功能吗？如果我使用隐藏然后可以检查源代码。也许任何带有简单哈希等的变量？如果不是，我怎么能用 .hide() 和 show() 做到这一点？我也可以使用 PHP 和 Ajax
View the jsfiddle here.
在此处查看 jsfiddle 。
回答by David says reinstate Monica
The simplest solution is:
最简单的解决方案是：
$('#lock').click(function() {
$(this).siblings().andSelf().fadeOut();
$('#div_lock').fadeIn();
})
$('#unlock').click(function() {
$('#div_lock').fadeOut();
$(this).closest('div').siblings().fadeIn();
})?
(Though note I'm using fadeIn()and fadeOut()rather than the 'more-sudden' show()and hide())
（尽管请注意我使用的是fadeIn()andfadeOut()而不是“更突然的” show()and hide()）
It's also worth remembering that if anyone has access to your browser (assuming this is some kind of security feature) they can still override this via the JavaScript console, or by simply refreshing the page (assuming no log-in).
还值得记住的是，如果有人可以访问您的浏览器（假设这是某种安全功能），他们仍然可以通过 JavaScript 控制台或简单地刷新页面（假设没有登录）来覆盖它。
Updated in response to comment left by OP (below):
更新以回应 OP 留下的评论（如下）：
this is ok, but if i click unlock then this show me also
<div id="three" style="display: none">hide</div>- this should me stilldisplay:none
没关系，但如果我点击解锁，那么这也会显示给我
<div id="three" style="display: none">hide</div>- 这应该我仍然display:none
The problem you have is that allthe affected elements are of style="display: none;"once the jQuery's hidden them (that's how it works, after all); so I'd suggest a tidier approach, and compartmentalising the content and the controls, to something resembling the following:
您遇到的问题是所有受影响的元素都被style="display: none;"jQuery 隐藏了（毕竟它是这样工作的）；所以我建议采用更整洁的方法，并将内容和控件划分为类似于以下内容的内容：
<div id="controls">
<button id="lock">Lock screen</button>
<input type="password" />
<button id="unlock">Unlock screen</button>
</div>
<div id="content">
<!-- all content goes in here -->
</div>?
Which lends itself to the following jQuery (which stores the nodes to hide/show as they are, and then restores them as required):
这适用于以下 jQuery（它存储节点以按原样隐藏/显示，然后根据需要恢复它们）：
var content = $('#content'),
contents;
$('#controls').children().slice(1).hide();
$('#lock').click(function() {
contents = content.html();
content.empty();
$(this).hide().siblings().show();
});
$('#unlock').click(function() {
content.html(contents);
$(this).closest('div').children().hide().first().show();
});?
回答by udidu
Well, I'v been in that situation before and found the perfect solution to lock the page with.
Actually this is very simple, what you need to do is to work with anonymous function and basic jQuery bindings, one more important thing is to load your lockable html data dynamically through javascript so using the View Sourcemode wont work...
here is the solution:
嗯，我以前遇到过这种情况，并找到了锁定页面的完美解决方案。其实这很简单，您需要做的是使用匿名函数和基本的 jQuery 绑定，更重要的一件事是通过 javascript 动态加载您的可锁定 html 数据，因此使用该View Source模式将不起作用……这是解决方案：
(function($){ //this way nobody can access you variables inside
var PAGE_CONTENT = "";
var IS_LOCK_MODE = false;
var $lockButton = $('#your_lock_button');
$lockButton.bind('click', function(){
if(!IS_LOCK_MODE){
PAGE_CONTENT = $('#your_content_container').html();
$('#your_content_container').empty();
IS_LOCK_MODE = true;
} else {
$('#your_content_container').html(PAGE_CONTENT);
PAGE_CONTENT = "";
IS_LOCK_MODE = false;
}
});
})(jQuery);
回答by b1_
Like this?
像这样？
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
.lock_page_div {
position: absolute;
top:0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
display: none;
background: #ffebcd;
}
</style>
<a href="javascript:" class="lock_page_a">block page</a>
<div class="lock_page_div">
<a class="unlock_page_a" href="javascript:">unlock_page_a</a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.lock_page_a').click(function(){
$('.lock_page_div').show();
console.log('lock');
})
$('.unlock_page_a').click(function(){
$('.lock_page_div').hide();
console.log('unlock');
})
})
</script>
</body>
</html>
Sorry, now jsfiddle so slow for me >__<
抱歉，现在 jsfiddle 对我来说太慢了 >__<
