`
yhef
  • 浏览: 67227 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

简单的JS Loading弹出层

阅读更多


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset="utf-8"> 
</head> 
<script>	

	//层的id
	var loadingDivId  = "loading_div";
	
	//创建或显示loading层
	function showLoadingDiv()
	{
		var div = document.getElementById(loadingDivId);
		if(!div)
		{
				div  = document.createElement("DIV");	
				with(div)
				{
					id = loadingDivId;			
					//如果能搞个类似FF转动的小图片就更ok了。 			
				  innerHTML = "<br/><br/><br/><br/>Loading";
				  style.position  = "absolute";
				  style.zIndex  = "9999";
				  style.backgroundColor="#7B68EE";
				  style.width="210px";
				  style.height="200px";
				  style.top = "2";
				  style.left = "5";		
				  style.textAlign="center";	 			
				  //DIV透明度	 		  	  
				style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)";	 		  
				}
				document.body.appendChild(div);
		}
		div.style.display="block";			 			 
	}
	//隐藏loading层
	function hiddenLoadingDiv()
	{
		var div = document.getElementById(loadingDivId);
		if(div)
			div.style.display="none";
	}
</script>
  <body>  
		<input id="y"  value="YHEF" />
		<input type="button" id="openBtn" value="Open" onclick="showLoadingDiv();"/>
		<span  style="width:100px;"/>
		<input type="button" id="hiddenBtn" value="Hidden" onclick="hiddenLoadingDiv();"/>
  </body> 
</html>




效果图:


  • 描述: 效果图
  • 大小: 5.7 KB
分享到:
评论

相关推荐

    实现网页蒙板效果和弹出层的html示例

    有些时候需要自己实现蒙板效果和弹出层的效果,这是一个简单的实现网页蒙板效果和弹出层的html示例

    web弹出层组件MyPopup

    MyPopup是一个JavaScript(js)弹出层、弹窗、对话框组件。MyPopup遵循javascript逻辑,容易理解,上手简单。MyPopup不仅模拟了alert、confirm、propmt等等控件,还扩展出tip(小提示框)、loading(加载中)、...

    vue弹出层插件包含toastloadingdialog等浮层控件

    vue弹出层插件,包含toast loading dialog等浮层控件

    封装js弹层提示插件

    Toast、alert、confirm、loading

    jQuery插件ImageFlyout弹出图片实现javascript放大图片功能

    实例中将ID为biuuu的DIV内所有链接元素增加javascript弹出放大图片功能,其中链接href部分为表示弹出的大图片路径。使用jQuery插件jQuery Image Flyout弹出图片,实现javascript弹出放大图片功能只需要一行代码即可...

    loading.rar

    一般常见简单的网页遮罩层弹出款,用的javascript写的

    jQuery 通用dialog/popup弹出层,提示窗口插件

    内容索引:脚本资源,jQuery,提示框,弹出层 jQuery 通用dialog/popup弹出层,提示窗口插件,包括有弹出自定义的帮助窗口(根据位置自动判断在底部或头部弹出)、显示和隐藏Loading信息、显示自定义Loading信息、在...

    程序天下:JavaScript实例自学手册

    1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 ...

    JQuery遮罩层登录界面源码

    测试浏览器:IE8、FF3.6.8、Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边) 点击登录显示登录窗口(层) ,同时用一个灰色...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 ...

    老生常谈遮罩层 滚动条的问题

    今天遇到的问题是,在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的css。 js代码 [removed] //显示灰色JS遮罩层 function showBg(ct,content){ var bH=$(document)....

    显示div层js.txt

    DIV弹出层 ******************************/ var cTime; function OpenDivLayer(tag) { var divBackground = document.getElementById('divBackground'); var divShow = document.getElementById('divShow'...

    仿QQ+webso框架·开源

    里面的弹出层,滚动条,还有右键菜单等控件的UI都在这里,有兴趣的可以自己试着改一下,改成属于自己的弹出层也说不定哦~这些控件就不细说了,等下几篇文章在详说。 然后是key值为defaultTemplated的,不用说,肯定...

    javascript网页特效实例大全

    4.20 关闭页面时弹出时间警告框 85 4.21 显示在按钮上的时间 86 4.22 计算出生时间 88 4.23 计算几天后将是什么日期 92 第5章 鼠标类特效 95 5.1 让鼠标悬停来开关窗口 96 5.2 鼠标的十字星准星 96 5.3 鼠标...

    Javascript 遮罩层和加载效果代码

    //弹出窗口的宽度;var iHeight = 0; //弹出窗口的高度;var scrolltop = 0;var scrollleft = 0;var cheight = 0;var cwidth = 0;var eTip = document.createElement(‘div’);eTip.setAttribute(‘id’, ‘tipDiv’)...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...

    ExtAspNet_v2.3.2_dll

    -Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...

    KODExplorer 芒果云-资源管理器

    - 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - ...

    400个DreamWeaver插件

    mxp/可以对文本框内的字符长度做限制,如果超出长度,可以弹出错误信息。 mxp/一个form Inspector的替代品。DW自己带的Form属性面板中没有target和enctype属性。这个有~ mxp/自从DW3开始后,就有一个叫做Web Photo ...

Global site tag (gtag.js) - Google Analytics