jquery - 如何在 jquery 和 css 中使 div 层不可选择

Question

我有一个 div 元素如下：

 <div id="wrapper">Content......</div>

我从 ajax 调用中获取了这个 div 层的内容。我想要做的是我想让该 div 不可点击、不可选择、可见性降低，并在该 div 顶部显示加载图像。我怎样才能做到这一点？任何建议

Answer 1

CSS就是你所需要的。

user-select: none;
-moz-user-select: none;
-khtml-user-select: none;

对于中心 div 上方的加载图像：

CSS：

#loading_spinner {
  position:absolute;
  width:20px;
  height:20px;
  background:url('image/path');
  display:none;
  z-index: 1000;
}

jQuery：

var target = $('#target'); // or this

$('body').append('<div id="loading"></div>');
$('#loading').css({
  left: ($(target).offset().left + $(target).outerWidth()/2) - ($(this).outerWidth()/2),
  top: ($(target).offset().top + $(target).outerHeight()/2) - ($(this).outerHeight()/2),
  display: 'block'
});

Answer 2

你可以去一个 jquery 包： http: //www.malsup.com/jquery/block/

有了这个，您可以在加载时呈现内容不可选择，并在其上添加加载图像。这是插件支持的。

Answer 3

在“内容...”上方仅使用 CSS 加载图像。

HTML

<div id="wrapper"><img id="LoadingImage" src=""/><span id="content">Content......</span></div>

风格

#wrapper{position:relative;}
#LoadingImage{position:absolute; z-index:2; left:0px; top:0px; opacity:0.5;}
#content{position:absolute; z-index:1; left:0px; top:0px;}