Jquery - How to Disable the Entire Page

Jquery - How to disable the entire page

A way of doing this is having an overlay element which fills the entire page. If the overlay element has a semi-transparent background color, it grays out the page completely: http://jsfiddle.net/SQdP8/1/.

Give it a high z-index so that it's on top of all other elements. That way, it renders correctly, and it catches all events (and won't pass them through).

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}​

Disable all form controls on a web page

$("form :input").attr("disabled","disabled");

:input selects all form controls, including input, textarea, select and button elements.

If you want to disable form elements that are outside of forms too, simply omit the 'form` selector from the above.

disable all page elements with modal feature using jquery

The page elements are not disabled - doing that would be quite tedious - but rather, a semi-transparent div is overlayed on top of all other page elements. To do this, you would probably do something like

// Declare this variable in the same scope as the ajax complete function
overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');

And the CSS:

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000000;
  background: url('link/to/semitransparent.png');
}

Then once the action is complete, you simply remove it like this:

overlay.remove();

No need to include jQuery UI if this is the only thing you need it for.

How to disable the clicking of any element on the page after a jQuery click

What about putting an overlay on top of your content?

JS:

$(document).ready(function(){
    $("#link").on( "click", function() {
        $(body).append('<div id="overlay"></div>');
        $("#loading").show(); // sets css to display: block (can also use fadeIn()
    });
});

CSS:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.6;
    z-index: 100;
}
#loading {
    z-index: 101;
    position: relative;
    background: url(../images/loading.png);
    display: none;
    margin: auto;
}

Disable page behind full-sized div in Bootstrap 3

This is the full-page div CSS:

.lightbox {
     display: none;
     position: fixed;
     z-index: 9999;
     width: 100%;
     height: 100%;
     text-align: center;
     top: 0;
     left: 0;
     background: rgba(0,0,0,0.8);
}

NOTE: Z-Index must be higher than 999 because some Bootstrap features are actually using it (ie. the nav-bar).

Then we define the div in the HTML:

<div class="lightbox" id="wait_lightbox">
  <div class="row">
    <div class="col-lg-12">
      Please, wait...
    </div>
  </div>
</div>

And with JQuery we catch the form submit without using preventDefault:

$(function() {
    $('#my_form').on('submit', function() {
        $('#wait_lightbox').show(0);
    });
});

disable all controls in the page using jquery

$("#id_button").attr("disabled","disabled");

or

$(".class_buttons").attr("disabled","disabled");

or

$(":input").attr("disabled","disabled");

How to disable all buttons on the page while uploading?

It's rather simple. Select all the input elements of the form with type button and disable them:

$("input[type=button]").attr("disabled", "disabled");

Disabling entire Div using jquery

Here is an example of using JQuery to disable all elements on page load, that are inside your div. Using pointer with CSS, it seems you just wanted an example. Maybe your learning, so here you go.

/** Example one **/window.onload = function(){  $("#comments-container").addClass("disable");  $("#two").addClass("disable"); /** Part of example two **/}
function enable() {  $("#comments-container").removeClass("disable");}
function disable() {  $("#comments-container").addClass("disable");}
/** End **/
/** Example two **/
$("#one").click(function() {  $("#two").removeClass("disable");});
/** End **/

.disable {        pointer-events: none;        opacity: 0.4;    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Example one --><div id="comments-container" class="comments-container2"><!-- Test, since I do not know if your content is dynamic -->   <input type="file"/></div>
<p><a href="#" onClick="enable()">Enable</a> <br/><a href="#" onClick="disable()">Disable</a></p>
<p> Or if you wanted some diabled, and some not. Or one affecting the other.</p>
<div id="example">  <div id="one"><a href="#">Link one, enables link two</a></div>  <div id="two"><a herf="#">Link two</a></div></div><!-- End -->

---

Related Topics