js弹出层

1.div附近显示

<div  id="message"></div>

$().delay().hide();  

2.遮罩层

表单提交后遮住页面,等返回数据后再去掉

      <div id="mask" class="mask">正在上传.......</div>
          <script type="text/javascript">
              //兼容火狐、IE8
              //显示遮罩层
              function showMask(){
                  $("#mask").css("height",$(document).height());
                  $("#mask").css("width",$(document).width());
                  $("#mask").show();
              }
              //隐藏遮罩层
              function hideMask(){     

                  $("#mask").hide();
              }  

          </script>
          <style type="text/css">
              .mask {
                      position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
                      z-index: 1002; left: 0px;
                      opacity:0.5; -moz-opacity:0.5;
                  }
          </style>   

3.自动消失

function alertWindow(content,divWidth, divHeight,dialogTop){
	if (divWidth == '') {
		divWidth = "150"
	}
	if (divHeight == '') {
		divHeight = "auto"
	}
	//距离顶部多少
	if (dialogTop == '') {
		dialogTop = "150"
	}
    var iLeft=($(window).width()-divWidth)/2;
    var iTop=($(window).height()-divHeight)/2+$(document).scrollTop();
    var divhtml=$("<div class='pop_alert'>"+content+"</div>").css(
	    	{
	    		position:'absolute',
	    		/*top:iTop+'px',*/
	    		top:($(document).scrollTop() + dialogTop) + "px",
	    		left:iLeft+'px',
	    	    display:'none',

	    	    width:divWidth+'px',
	    	    height:divHeight
    	    }
    		);
    divhtml.appendTo('body').fadeIn();
    divhtml.appendTo('body').fadeOut(2000);
}

  

js弹出层的更多相关文章

  1. jquery.blockUI.2.31.js 弹出层项目介绍

    {insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...

  2. js 弹出层,以及在javascript里定义层样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 简单 JS 弹出层 背景变暗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  5. JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  6. Js弹出层,弹出框代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. div+js 弹出层

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  8. JS 弹出层 定位至屏幕居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS弹出层遮罩,隐藏背景页面滚动条细节优化

    做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加ove ...

随机推荐

  1. Javassist之使用字节码在运行时生成新的类 01

    介绍 Javassist是一个开源的分析.编辑和创建Java字节码的类库.是由东京工业大学的数学和计算机科学系的 Shigeru Chiba (千叶 滋)所创建的.它已加入了开放源代码JBoss 应用 ...

  2. css居中小技巧

    一.行内元素-水平居中 在父元素的样式中添加: text-align:center; 二.定宽块级元素-水平居中 所谓定宽块级元素指块级元素的宽度指定,而不是默认的100%,否则此方法无效: 代码: ...

  3. struts2 的struts.xml配置文件

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...

  4. Android系统启动概要

    注:Java系统服务与本地系统服务标注反了 1.Linux内核 Android系统启动时,首先通过BootLoader(系统加载器)加载Linux内核,在Linux加载启动时,首先初始化内核,再调用i ...

  5. Educational Codeforces Round 53 (Rated for Div. 2) D. Berland Fair

    题意:一个人  有T块钱 有一圈商店 分别出售 不同价格的东西  每次经过商店只能买一个  并且如果钱够就必须买 这个人一定是从1号店开始的!(比赛的时候读错了题,以为随意起点...)问可以买多少个 ...

  6. 【XSY2707】snow 线段树 并查集

    题目描述 有\(n\)个人和一条长度为\(t\)的线段,每个人还有一个工作范围(是一个区间).最开始整条线段都是白的.定义每个人的工作长度是这个人的工作范围中白色部分的长度(会随着线段改变而改变).每 ...

  7. Python 面试题_未完

    基础部分 1. 为什么学习Python 家里有在这个IT圈子里面,也想让我接触这个圈子,然后给我建议学的Python, 然后自己通过百度和向有学过Python的同学了解了Python,Python这门 ...

  8. 【Gym - 100947G】Square Spiral Search

    BUPT 2017 summer training (for 16) #1C 题意 A new computer scientist is trying to develop a new memory ...

  9. QML用Qt.labs.settings实现保存用户设置

    举个简单的例子: main.cpp中设置程序信息 QGuiApplication::setApplicationName("Gallery"); QGuiApplication:: ...

  10. NOIP2018退役记(记事)

    希望还是要有的,万一退役了呢? Day1 听说300是大众分? 不会T2,不会T3,再别OI. Day2 听说200是大众分? T1FST掉,不会T2,不会T3,再别OI. 茶馆小人书 那些让我们聊以 ...