jquery other page element inactive after $("#div").show()

Question

how can i do. i have many html elements on page. after clicking on html button, i want that, my special div showed, but, other html are inactive. for example, textareas not editable, buttons are not clickable.

thanks

Forget say "SpecialDiv" also contain buttons, selects, textareas etc. they must be "abled".

Answer 1

You need to make a separate, transparent <div> that covers the entire page.

You're probably looking for jQuery UI Dialog or jqModal.

Answer 2

$('#yourDiv').show();
$('input, textarea, button').attr('disabled', 'disabled');

Answer 3

Well that's a little vague, but

function zap() {
  $('#magicDiv').show();
  $('input, button, textarea, select').attr({disabled: true});
}
function unzap() {
  $('#magicDiv').hide();
  $('input, button, textarea, select').attr({disabled: false});
}

Now if you need to worry about other things that might disable inputs, you could do this:

function zap() {
  $('#magicDiv').show();
  $('input, button, select, textarea').each(function(_, elem) {
    if (!elem.disabled) {
      $(elem).data('zapped', true).attr('disabled', true);
    }
  });
}
function unzap() {
  $('#magicDiv').hide();
  $('input, button, select, textarea').each(function(_, elem) {
    if ($(elem).data('zapped')) {
      $(elem).data('zapped', false).attr('disabled', false);
    }
  });
}