使用jQuery锁定和解锁页面？

问题描述：

<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(); 
//???? 
})

如果我点击LOCK，那么我想打开div_lock并隐藏页面中的所有其他元素。如果我点击解锁，然后隐藏div_lock并显示以前的元素。使用jQuery锁定和解锁页面？

我可以使用除.hide之外的其他功能吗？如果我使用隐藏，那么可以检查源代码。也许有SIMPLE哈希等变量？如果不是我如何使用.hide（）和show（）？我也可以使用PHP和Ajax

查看jsfiddle here。

你真的不能锁定页面 – Esailija 2012-07-22 19:25:06

我知道，但我想试试:) – 2012-07-22 19:30:17

也许你可以存储在JavaScript变量的页面内容，但这样做不应该neccessary – Undefined 2012-07-22 19:32:26

答

最简单的解决方法是：

$('#lock').click(function() { 
    $(this).siblings().andSelf().fadeOut(); 
    $('#div_lock').fadeIn(); 
}) 

$('#unlock').click(function() { 
    $('#div_lock').fadeOut(); 
    $(this).closest('div').siblings().fadeIn(); 
})

（但请注意我用fadeIn()和而非“更多 - 突然'show()和hide()）

JS Fiddle demo。如果任何人有权访问您的浏览器（假设这是某种安全功能），他们仍然可以通过JavaScript控制台或通过刷新页面（假设没有登录）来覆盖此页面。

响应更新评论通过OP（下）左：

这是确定的，但如果我点击解锁，然后这让我也<div id="three" style="display: none">hide</div> - 这应该我仍然display:none

您遇到的问题是，全部受影响的元素是style="display: none;"，一旦jQuery隐藏了它们（毕竟这就是它的工作方式）;所以我建议一个整洁的做法，compartmentalising内容和控制，以类似下面：

<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>

这本身借给以下的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(); 
});

JS Fiddle demo。

这是好的，但如果我点击解锁，然后这个显示我也

- 这应该我仍然显示：无 – 2012-07-22 20:18:37

看到编辑，希望这应该更接近？ – 2012-07-22 20:45:20

答

是否这样？

<!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>

对不起，现在的jsfiddle这么慢，我> __ <

答

嗯，我以前在那种情况下，找到了一个完美的解决方案来锁定页面。其实这很简单，你需要做的就是使用匿名函数和基本的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);

使用jQuery锁定和解锁页面？

相关推荐