-1

Possible Duplicate:
How to disable all div content

Is it possible to only show div but you can not click on anything which is in? Like "blocked" div? Cause I have buttons, selects, and some information in this div, so I want only to make it visible but not working.

Community
  • 1
  • 1
Geril
  • 159
  • 1
  • 15

8 Answers8

3

You may add a transparent div over the whole window.

$('body').append($('<div style="opacity:0; z-index:10; position:fixed; top:0; left:0; right:0; bottom:0">'));

Fiddle demonstration : http://jsfiddle.net/HeNwE/

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • Having seemingly active yet unclickable elements on a web page is confusing to the user and bad design. – Endy Aug 29 '12 at 13:27
  • @Endy This is an answer to the question. I see a good use case : when you add a dialog over everything (when I do it I use a grey not totally transparent div to make it more clear). – Denys Séguret Aug 29 '12 at 13:27
  • Look at the answer posted in the comment on the question and then decide which approach you think is better. – Endy Aug 29 '12 at 13:40
0

Lokase has the right idea.

$(".wrapper-div-class").click(function(event) {
  event.preventDefault();
});

You could also try to have a 100% x 100% div z-indexed on top of the div that contains all of the elements.

Test out Endy's answer for handeling input elements on the page.

ckaufman
  • 1,487
  • 9
  • 15
  • You can still access the inputs with keyboard. – Endy Aug 29 '12 at 13:16
  • so if I have
    script will looks like `` ?
     – Geril Aug 29 '12 at 13:16
  • Correct. And you don't need it, but always good practice to include the closing ; after your function method. – ckaufman Aug 29 '12 at 13:17
0

Add a transparent div into your target div, over the whole content. Here is a demo : http://jsfiddle.net/TkTx6/2/

html : 

<div>
    <div></div>
    <button></button>
    <input type="text">
</div>

css:

div {
    width : 200px;
    height: 200px;
    background: red;        
}
div div {
    background : transparent;
    cursor: default;
    position: absolute;
}
gabitzish
  • 9,535
  • 7
  • 44
  • 65
0

Yes. You can simply place an absolutely positioned div that is the same size as your container over top of your content. This will disallow interactivity with the elements below.

<style type="text/css">
#container{
    width:300px;
    height:300px;
    }

#shield{
    width:300px;
    height:300px;
    position:absolute;
    z-index:10;
    }


<div id="container">
<div id="shield"></div>
<a href="#" title="">You can't click me</a>
</div>
Mattyb
  • 9
0

you can do like this

<div onclick="return false">
... <!-- insert here your buttons -->
</div>
alessio271288
  • 348
  • 1
  • 7
0

Add a transparent layer over the div: fiddle.

div {
    position: relative;
}

div:after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}​
João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
-1

Use preventDefault on any element you want to override:

event.preventDefault()

You can also use stopPropagation in specific instances as well

event.stopPropagation

Lowkase
  • 5,631
  • 2
  • 30
  • 48
  • You would have to bind a lot of events, as you can still use inputs with your keyboard. – Endy Aug 29 '12 at 13:12
-3

You could make all the input elements disabled on the div with Javascript and JQuery, then enable them when you choose to.

Example:

$('.myDiv:input').each(function()) {
    $(this).prop('disabled', 'disabled');
}

IF you don't need to dynamically change the inputs then just set 'disabled="disabled"' into the elements.

This approach is also better than the "invisible div" as it can be very confusing to a user if he/she can't click on a control on a page, or select text.

Endy
  • 698
  • 3
  • 11