How to disable all div content

2楼-- · 2019-01-01 14:48

Below is a more comprehensive solution to masking divs enabling

no separate CSS
cover the whole page or just an element
specify mask color and opacity
specify Z-index so you can show popups over the mask
show an hourglass cursor over the mask
removing the masking div on maksOff so a different one can be shown later
stretch mask when element resize
return the mask element so you can style it etc

Also included is hourglassOn and hourglassOff which can be used separately

// elemOrId - jquery element or element id, defaults to $('<body>')'
// settings.color defaults to 'transparent'
// settings.opacity defaults to 1
// settings.zIndex defaults to 2147483647
// if settings.hourglasss==true change cursor to hourglass over mask
function maskOn(elemOrId, settings) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    var maskDiv=elem.data('maskDiv');
    if (!maskDiv) {
        maskDiv=$('<div style="position:fixed;display:inline"></div>');
        $('body').append(maskDiv);
        elem.data('maskDiv', maskDiv);
    }

    if (typeof settings==='undefined' || settings===null) settings={};
    if (typeof settings.color==='undefined' || settings.color===null) settings.color='transparent';
    if (typeof settings.opacity==='undefined' || settings.opacity===null) settings.opacity=1;
    if (typeof settings.zIndex==='undefined' || settings.zIndex===null) settings.zIndex=2147483647;
    if (typeof settings.hourglass==='undefined' || settings.hourglass===null) settings.hourglass=false;

    // stretch maskdiv over elem
    var offsetParent = elem.offsetParent();
    var widthPercents=elem.outerWidth()*100/offsetParent.outerWidth()+'%';
    var heightPercents=elem.outerHeight()*100/offsetParent.outerHeight()+'%';
    maskDiv.width(widthPercents);
    maskDiv.height(heightPercents);
    maskDiv.offset($(elem).offset());

    // set styles
    maskDiv[0].style.backgroundColor = settings.color;
    maskDiv[0].style.opacity = settings.opacity;
    maskDiv[0].style.zIndex = settings.zIndex;

    if (settings.hourglass) hourglassOn(maskDiv);

    return maskDiv;
}

// elemOrId - jquery element or element id, defaults to $('<body>')'
function maskOff(elemOrId) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    var maskDiv=elem.data('maskDiv');
    if (!maskDiv) {
        console.log('maskOff no mask !');
        return;
    }

    elem.removeData('maskDiv');
    maskDiv.remove();
}

// elemOrId - jquery element or element id, defaults to $('<body>')'
// if decendents is true also shows hourglass over decendents of elemOrId, defaults to true
function hourglassOn(elemOrId, decendents) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    if (typeof decendents==='undefined' || decendents===null) decendents=true;

    if ($('style:contains("hourGlass")').length < 1) $('<style>').text('.hourGlass { cursor: wait !important; }').appendTo('head');
    if ($('style:contains("hourGlassWithDecendents")').length < 1) $('<style>').text('.hourGlassWithDecendents, .hourGlassWithDecendents * { cursor: wait !important; }').appendTo('head');
    elem.addClass(decendents ? 'hourGlassWithDecendents' : 'hourGlass');
}

// elemOrId - jquery element or element id, defaults to $('<body>')'
function hourglassOff(elemOrId) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    elem.removeClass('hourGlass');
    elem.removeClass('hourGlassWithDecendents');
}

function elemFromParam(elemOrId) {
    var elem;
    if (typeof elemOrId==='undefined' || elemOrId===null) 
        elem=$('body');
    else if (typeof elemOrId === 'string' || elemOrId instanceof String) 
        elem=$('#'+elemOrId);
    else
        elem=$(elemOrId);

    if (!elem || elem.length===0) {
        console.log('elemFromParam no element !');
        return null;
    }

    return elem;
}

With this you can do for example:

maskOn(); // transparent page mask
maskOn(null, {color:'gray', opacity:0.8}); // gray page mask with opacity
maskOff(); // remove page mask
maskOn(div); // transparent div mask
maskOn(divId, {color:'gray', hourglass:true}); // gray div mask with hourglass
maskOff(div); // remove div mask

see jsfiddle

0人赞添加讨论(0) 举报

裙下三千臣

3楼-- · 2019-01-01 14:48

EDIT: Below I've used .on() method, instead use .bind() method

$(this).bind('click', false);
$(this).bind('contextmenu', false);

to remove your setting, you can use .unbind() method. Whereas the .off() method doesn't work as expected.

 $(this).unbind('click', false);
 $(this).unbind('contextmenu', false);

After researching hundreds of solutions! learning about pointer-events, below is what I did.

As @Kokodoko mentioned in his solution which is apt for all browsers except IE. pointer-events work in IE11 and not in the lower versions. I also noticed in IE11, pointer-events do not work on the child elements. And hence if we have something like below

 <a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>

where span -is the child element, setting pointer-events: nonewont work

To overcome this problem I wrote a function which could act as pointer-events for IE and will work in the lower versions.

In JS File

DisablePointerEvents(".DisablePointerEvents");


function DisablePointerEvents(classId) {
    $(classId).each(function () {
        $(this).on('click', false );
        $(this).on('contextmenu', false );
    });
}

In CSS File

.DisablePointerEvents{
    pointer-events: none;
    opacity: 0.7;
    cursor: default;
}

In HTML

 <a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>

This faked the pointer-events scenario where pointer-events doesnt work and when the above condition of child elements occur.

JS Fiddle for the same

https://jsfiddle.net/rpxxrjxh/

0人赞添加讨论(0) 举报

其实，你不懂

4楼-- · 2019-01-01 14:50

How to disable the contents of a DIV

The CSS pointer-events property alone doesn't disable child elements from scrolling, and it's not supported by IE10 and under for DIV elements (only for SVG). http://caniuse.com/#feat=pointer-events

To disable the contents of a DIV on all browsers.

Javascript:

$("#myDiv")
  .addClass("disable")
  .click(function () {
    return false;
  });

Css:

.disable {
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

To disable the contents of a DIV on all browsers, except IE10 and under.

Javascript:

$("#myDiv").addClass("disable");

Css:

.disable {
  // Note: pointer-events not supported by IE10 and under
  pointer-events: none;
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

0人赞添加讨论(0) 举报

几人难应

5楼-- · 2019-01-01 14:51

Use a framework like JQuery to do things like:

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#idOfTheDIV :input').attr('disabled', true);
    } else {
        $('#idOfTheDIV :input').removeAttr('disabled');
    }   
}

Disable And Enable Input Elements In A Div Block Using jQuery should help you!

As of jQuery 1.6, you should use .prop instead of .attr for disabling.

0人赞添加讨论(0) 举报

牵手、夕阳

6楼-- · 2019-01-01 14:51

Here is a quick comment for people who don't need a div but just a blockelement. In HTML5 <fieldset disabled="disabled"></fieldset> got the disabled attribute. Every form element in a disabled fieldset is disabled.

0人赞添加讨论(0) 举报

听够珍惜

7楼-- · 2019-01-01 14:52

Another way, in jQuery, would be to get the inner height, inner width and positioning of the containing DIV, and simply overlay another DIV, transparent, over the top the same size. This will work on all elements inside that container, instead of only the inputs.

Remember though, with JS disabled, you'll still be able to use the DIVs inputs/content. The same goes with the above answers too.

0人赞添加讨论(0) 举报

How to disable all div content

How to disable the contents of a DIV

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间