使用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。

來源

2012-07-22 Paul Jeggor

你真的不能鎖定頁面 – 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:15:53

這是好的，但如果我點擊解鎖，然後這個顯示我也

- 這應該我仍然顯示：無 – 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這麼慢，我> __ <

來源

2012-07-22 20:10:38 nk9

嗯，我以前在那種情況下，找到了一個完美的解決方案來鎖定頁面。其實這很簡單，你需要做的就是使用匿名函數和基本的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);

來源

2012-07-22 20:59:20 udidu

使用jQuery鎖定和解鎖頁面？

回答

相關問題