在上一个项目中使用了很多的ajax加载，但全部实现完之后调试的时候我发现一个问题，客户是不知道ajax的进度的，所以当ajax在请求并加载的时候，用户可能以为自己的操作失败了，或者有自己根本没有成功点击的错觉，而再次进行操作，这时ajax会再次发送请求，虽然我们可以通过js判断ajax是否在请求，但用户还是不清楚自己处于什么状态，所以呢我决定制作一个简单的遮罩层，提示用户是加载失败，还是加载成功还是加载中，并且短暂的剥夺用户的操作权限。
下面就开始制作，遮罩层（mask）比较的简单，我并没有使用百度上写好的jq或js，直接自己写了一个自己理解的遮罩层，使用js或者jq的元素创建功能，在body里添加一个大的div元素，这个元素呢首先z-index很大，至少比页面所有内容都大，有了z-index相信大家都有预感。这个元素是position的，把他固定到屏幕就可以，这样无论用户是在页面的哪里点击，都会被遮罩层完全遮挡页面，最后呢，为了用户体验好些，也美观些，这个遮罩层我使用了灰色半透明，这里要注意ie和其他浏览器的半透明兼容。这个大div的代码如下
然后我们在这个遮罩层一起加入一些提示信息，正常来说可以吧这些提示信息直接扔到这个大的div里，但由于这两个东西最好都要居中并且我对兼容比较生疏所以采用了两个div，在js里获得屏幕宽高来进行居中。这是内容提示div
这里的num 和 width 是js去获取屏幕的宽高后计算得来的。接下来我们就可以试着去运行一下这个遮罩层。效果如下
由于还没有js传值所以他在左边。看起来没有问题，那我们就试着把他加载到项目中。js代码
效果如图
这他奶奶的就尴尬了，相信用过frameset或者iframe做后台的都知道这个问题所在了，我们编写的js代码是在当前htmlbody里生成一个遮罩层，这效果真的辣眼睛，放给客户是不用指望能搞定的。所以有问题就解决问题，我们现在生成了一个子框架的遮罩层，jq选择器选择的就是子框架的body。那怎么才能去框架父级生成呢，只要我们能找到父级的节点对象就可以了，jq的选择器功能非常强大，在选择器里填加一个可选参数就可以选择子级或父级的节点对象，并对其进行操作，但这里我换了iframe因为frameset里没有body他们是不并存的。最终的完整代码如下
效果就可以完成这样啦！
