Make body readonly

Question

On opening a dialog I want to make the rest of the body readonly/unselectable. I'm using jquery. Currently I'm using this, but it doesnt work:

<script>
$('document').ready(function() {
    $('#advertMenu').click(function() {
        $("body").attr("readonly", "readonly"); 
    });
});
</script>

After Edit

$("body").css("-moz-user-select", "-moz-none"); 
        $("body").css("-khtml-user-select", "none");
        $("body").css("-webkit-user-select", "none");
        $("body").css("-o-user-select", "none");
        $("body").css("-user-select", "none");

What type of dialog? jQuery dialog? In this case you can open like modal. [jQuery modal dialog](http://jqueryui.com/dialog/#modal) — Jorge Loureiro, May 20 '13 at 11:58
no, I'll prompt a div & make the rest body's opacity low & want to make it uneditable. — Jaskaran S.P, May 20 '13 at 11:59
it means you want to display some kind of overlay on screen, right? — muneebShabbir, May 20 '13 at 12:02
Try use jQuery dialog instead. Is very good and probably remove all your problems and use have a lot of more usages. But if you don't want change your code use can put a `div` hover all other elements with the opacity that you want (overlay div). — Jorge Loureiro, May 20 '13 at 12:02
@JorgeLoureiro .... using jquery increses the load time of the page, Thats why i avoid it — Jaskaran S.P, May 20 '13 at 12:06

score 0 · Answer 1 · answered May 20 '13 at 11:55

0

Please try this

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

 $('#advertMenu').click(function() {
        $("body").addClass('unselectable'); 
 });

answered May 20 '13 at 11:55

Anjith K P

2,158
27
35

When it will be reverted back? – Anjith K P May 20 '13 at 12:07
yeah. ive tried your latest one with "class" , dindt get a positive result / – Jaskaran S.P May 20 '13 at 12:07

Umesh Sehta · Accepted Answer · 2013-05-20T12:13:26.520

-1

Try this:-

         $(document).ready(function(){
             $('body').attr('unselectable', 'on')
             .css('user-select', 'none')
             .on('selectstart', false);
             });

Live Demo:http://jsfiddle.net/d48vY/

edited May 20 '13 at 12:13

answered May 20 '13 at 11:56

Umesh Sehta

10,555
5
39
68

yes it works, but the problem is all the links & from fields are still selectable. how can they be disabled as well ? – Jaskaran S.P May 20 '13 at 13:40

Make body readonly

2 Answers2