CODEWITHSUNDEEP
jqueryhtml
Cristhian Boujon
Cristhian Boujon

Reputation: 4190

locking screen or elements with jQuery

I have a HTML page. By default #B is set as display: none and when I click on #button #B is shown as overlay style via jQuery. Also I need to lock all elements except #B 

<div id="A">
    <!-- Some HTML elements -->
    <a id="button">Button</a>
    <div id="B">
        <!-- Some HTML elements -->
    </div>
</div>

Can you seggest me a jquery plugin in order to do this?

Upvotes: 1

Views: 5728

Answers (2)

VVV
VVV

Reputation: 7593

David Thomas' answer is good but if you want the jQuery version of it, take a look at this fiddle. Also, :target is not support in version earlier than IE9.

HTML

<div id="A">
    <!-- Some HTML elements -->
    <a id="button" href="#">Button</a>
    <div id="B">
        <div id="background"></div>
        <div id="content">
            <p>This is a paragraph</p>
            <img src="http://fakeimg.pl/350x200/?text=This is an image" width="350" height="200" />
        </div>
    </div>
</div>

CSS

#A {}

#B, #background  {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:10;
}

#B  {
    display:none; 
}

#background  {
    background:#FFF;
    opacity:0.3;
}

#content {
    position:absolute;
    z-index:20;
    top:0; /* will be centered by jQuery */
    left:0; /* will be centered by jQuery */
}

JAVASCRIPT

$(document).ready(function() { 
    $('#button').click(function() {
        showOverlay();
    });

     //if you want to close the overlay if the user clicks the background
    $('#background').click(function() {
        $('#B').hide();
    }) 
});

function showOverlay() {
    $('#B').show();
    $('#content').css({
        top : ($(window).height() - $('#content').height()) / 2,
        left : ($(window).width() - $('#content').width()) / 2
    });
}

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

You can do this with pure CSS, in the majority of browsers (those that support the :target pseudo-selector), given the following (generic) HTML:

<div id="lock">
    <a href="#unlocked">Unlock</a>
</div>
<div id="unlocked" class="pageContent">
    <a href="#lock">Lock page</a>
    <p>This is the container element for page-content</p>
</div>

And CSS:

#lock {
    display: none;
}
#lock:target {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.5);
    border: 10em solid rgba(0,0,0,0.6);
    text-align: center;
}

JS Fiddle demo

It is, of course, worth reiterating the obvious: this content is on the user's machine, therefore you can't prevent their interaction with the content (assuming they know how to interact with the content, for example: right-click -> inspect element -> right-click in the web inspector -> 'delete node', or simply with JavaScript: document.body.removeChild(document.getElementById('lock'));). This approach, above, only presents an illusion of restriction, and then only to a relatively docile/disinterested user.

Upvotes: 4

Related Questions