<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.
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
View the jsfiddle here.
<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.
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
View the jsfiddle here.
Share Improve this question edited Jul 22, 2012 at 20:00 user557846 asked Jul 22, 2012 at 19:22 Paul JeggorPaul Jeggor 4893 gold badges6 silver badges14 bronze badges 4- You cannot really lock a page – Esailija Commented Jul 22, 2012 at 19:25
- i know, but i would like try :) – Paul Jeggor Commented Jul 22, 2012 at 19:30
- Maybe you could store the page content in a JavaScript variable, but doing this shouldn't be neccessary – Undefined Commented Jul 22, 2012 at 19:32
- anything you do in jQuery or Javascript can be undone by the user, if you really prevent the user from doing anything it should be server side – Scott Selby Commented Jul 22, 2012 at 20:16
3 Answers
Reset to default 2The 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())
JS Fiddle demo.
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).
Updated in response to ment left by OP (below):
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
The problem you have is that all the 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 partmentalising the content and the controls, to something resembling the following:
<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):
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.
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./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 >__<
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 Source mode wont work...
here is the solution:
(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);
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744168708a4561427.html
评论列表（0条）