JQuery-遮罩层

HTML

<html>
  <head>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="Jquery.js" type="text/javascript"></script>
    <script src="JavaScript.js" type="text/javascript"></script>
  </head>
  <title>Title</title>
  <body>
    <div id="bodydiv">
      <input type="button" id="buttonshow" value="显示" />
      <div id="divpopup">
        <input type="button" id="buttonclose" value="关闭"/>
      </div>
      <div id="divcover">
      </div>
    </div>
  </body>
</html>

JS(JavaScript.js)

$(function(){
  $("#buttonshow").click(function(){
    $("#divcover").css("height",$(document).height());
    $("#divcover,#divpopup").show(1000).css("display","block");
    $("#buttonshow").hide(1000);
    $("#buttonclose").click(function(){
      $("#divcover,#divpopup").hide(1000);
      $("#buttonshow").show(1000);
    });
  });
});

CSS(StyleSheet.css)

#divpopup
{
  display:none;
  position:fixed;
  z-index:1002;
}
#divcover
{
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: Gray;
  position: absolute;
  display: none;
  z-index: 1001;
  opacity:0.50;
}

时间: 2024-08-26 14:13:29

JQuery-遮罩层的相关文章

jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

jquery遮罩层

(function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivClass) { this.unmask(); // 参数 var op = { opacity: 0.8, z: 10000, bgcolor: '#ccc' }; var original = $(document.body); var position = { top: 0, left: 0 };

jquery 遮罩层显示img

如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶层添加dom对象,用来显示信息,默认隐藏,需要时在iframe中调用,宽高设置为100%. 实现如下: //遮罩层 .showmask { position: fixed; z-index: 99; width: 100%; height: 100%; background-color: silve

jquery遮罩层的实现

首先,实际上新的窗口并不是创建出来再弹出来,而是将原本隐藏的重新显示出来. html结构如下: <div> <!-->页面内容<--> </div> <div class="mask"> <!-->蒙版<--> </div> <div class="toDisplay"> <!-->弹出层<--> </div> 点击Butt

JQuery 遮罩层弹窗

var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 9999;\">"; str += "<div id=\"tanchuang\"

jQuery弹出遮罩层效果完整示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作

<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3

jquery实现div遮罩层

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

jQuery点击图片弹出大图遮罩层

使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链接:http://hovertree.co

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg