How to make inactive content inside a div

Question

How to make content in some div block inactive using JavaScript   Let s say there is a button with command  Enable   Disable   And there is one div block with some text  When pushing button  Enable   Disable   is it is  Enable   you can work with content inside  but when  Disable   you can t work with content inside div block   I imagine in order to make inactive content inside div block  we need to put another layer upon that will prevent from editing content on the content div block   I m getting confused how to realize this kind of feature

User · Answer

div disabled      pointer-events  none    opacity  0 6    background  rgba 200  54  54  0 5       background-color  yellow    filter  alpha opacity 50     zoom  1      -ms-filter   quot progid DXImageTransform Microsoft Alpha Opacity 50  quot       -moz-opacity  0 5     -khtml-opacity  0 5

User · Answer

Using jquery you might do something like this      To disable      targetDiv   children   attr  disabled    disabled        To enable     targetDiv   children   attr  enabled    enabled      Here s a jsFiddle example  http   jsfiddle net monknomo gLukqygq   You could also select the target div s children and add a  disabled  css class to them with different visual properties as a callout     disable by adding disabled class     targetDiv   children   addClass  disabled       enable by removing the disabled class     targetDiv   children   removeClass  disabled      Here s a jsFiddle with the as an example  https   jsfiddle net monknomo g8zt9t3m

User · Answer

if you want to hide a whole div from the view in another screen size  You can follow bellow code as an example    div disabled    display  none

User · Answer

div disabled      pointer-events  none    opacity  0 7      The above code makes the contents of the div disabled  You can make div disabled by adding disabled attribute    lt div disabled gt       Contents     lt  div gt

User · Answer

Without using an overlay  you can use pointer-events  none on the div in CSS  but this does not work in IE or Opera   div disabled     pointer-events  none        for  disabled  effect      opacity  0 5    background   CCC      Reference

[css] How to make inactive content inside a div?

Examples related to css

Examples related to layout

Examples related to html