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

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 edit开发者_如何学Cable, buttons are not clickable.

thanks

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

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

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

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

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);
    }
  });
}