- 浏览: 36206 次
- 性别:
- 来自: 广州
最近访客 更多访客>>
最新评论
-
charrys:
呵自己跟自己留言
JS可以控制样式的名称写法 -
charrys:
自己顶下
我的json获取数据实例,直接运行就可以看到了
直接贴代码了!(来自:http://www.ok22.org/art_detail.aspx?id=120)
<!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-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> function BOX_show(e,a)//显示 { if (document.getElementById(e) == null) { return; } if (!a) { var selects = document.getElementsByTagName('select'); for (i = 0; i < selects.length; i++) { selects[i].style.visibility = "hidden"; } } BOX_layout(e); window.onresize = function() { BOX_layout(e); } //改变窗体重新调整位置 window.onscroll = function() { BOX_layout(e); } //滚动窗体重新调整位置 document.onkeyup = function(event) { var evt = window.event || event; var code = evt.keyCode ? evt.keyCode : evt.which; //alert(code); if (code == 27) { BOX_remove(e); } } } function BOX_remove(e)//移除 { window.onscroll = null; window.onresize = null; document.getElementById('BOX_overlay').style.display = "none"; document.getElementById(e).style.display = "none"; var selects = document.getElementsByTagName('select'); for (i = 0; i < selects.length; i++) { selects[i].style.visibility = "visible"; } } function BOX_layout(e)//调整位置 { var a = document.getElementById(e); if (document.getElementById('BOX_overlay') == null)//判断是否新建遮掩层 { var overlay = document.createElement("div"); overlay.setAttribute('id', 'BOX_overlay'); document.body.appendChild(overlay); } document.getElementById('BOX_overlay').ondblclick = function() { BOX_remove(e); }; //取客户端左上坐标,宽,高 var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); var clientWidth; if (window.innerWidth) { clientWidth = window.innerWidth; } else { clientWidth = document.documentElement.clientWidth; } var clientHeight; if (window.innerHeight) { clientHeight = window.innerHeight; } else { clientHeight = document.documentElement.clientHeight; } var bo = document.getElementById('BOX_overlay'); bo.style.left = scrollLeft + 'px'; bo.style.top = scrollTop + 'px'; bo.style.width = '100%'; bo.style.height = clientHeight + 'px'; bo.style.display = 'block'; //Popup窗口定位 a.style.display = 'block' a.style.left = scrollLeft + ((clientWidth - a.offsetWidth) / 2) + 'px'; a.style.top = scrollTop + ((clientHeight - a.offsetHeight) / 2) + 'px'; } function HiddenButton(e) { e.style.visibility = 'hidden'; e.previousSibling.style.visibility = 'visible' } function UserLogin(e) { BOX_show(e); } </script> <style> *{margin:0;padding:0;font-size:12px;font-style:normal;line-height:20px;} html,body{height:100%;overflow:hidden;} /**mask**/ #BOX_overlay {background:#000;left:0;filter:alpha(opacity=80);-moz-opacity:0.8; opacity: 0.8;position:absolute;top:0;z-index:100;} /**iframe**/ div#layer_box{height:80%;width:80%;padding:30px 10px 10px;position:absolute;display:none;z-index:101;background:#fff url(bgimgconer_files/gradient.png); } </style> </head> <body> <a href="javascript:UserLogin('layer_box');"><img src="brandPIC/BMW.png" />宝马</a> <div id="layer_box"> <iframe id="alls" name="alls" frameborder="0" scrolling="auto" src="http://www.lempon.com" width="100%" height="100%"></iframe> </div> </body> </html>
发表评论
-
我的json获取数据实例,直接运行就可以看到了
2011-04-18 10:36 1313开始一直用jq的ajax接收值也是字符但是没用过json数据。 ... -
ckeditor 编辑器+finder配置上传功能
2011-04-03 11:53 1330一、官方Download 1、CKEditor ... -
kindeditor/ckeditor 编辑器加+图片自动上传成功(源码下载)
2011-04-03 11:40 1997编辑器加+图片自动上传并且更新编辑器图片的URL成功完例! ... -
js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
2011-03-12 16:28 1381iframe的高度一直是让人头疼的问题。今天因为有个项目需要用 ... -
js多Tab自动切换,带完善的鼠标事件
2011-03-01 09:31 1565js多Tab自动切换,带完善的鼠标事件! 说明:打开鼠标时 ... -
js多个tab切换简单不需要在body内添加事件
2011-02-15 17:20 1335注意的是a的里面的rel属性window.onload事件!在 ... -
js文字上下滚动+左右滚动兼容FF/IE
2011-02-15 11:07 1789我也是最近因为要做这 ... -
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
2011-02-14 15:59 1339看了很多别人写的tab切换效果感觉都只是div+js去切换已存 ... -
清空数组的两种方式
2011-02-09 16:58 2271方式一,length赋值为0 这种方式很有意思,其它语言 ... -
js时间倒计时
2011-01-06 11:26 869前断时间,因为需要 ... -
JS可以控制样式的名称写法
2011-01-06 11:19 1016盒子标签和属性对照 CSS语法 (不区分大小写) ... -
js给C#控件赋值
2010-12-30 10:34 1777前台代码 Html代码 <%@ Pa ... -
iframe里面的页面调用父窗口,左右窗口js函数的方法
2010-12-30 10:33 1215iframe里面的页面调用父窗口,左右窗口js函数的方法 ... -
关于图片延迟加载技术-ImageLazyLoad
2010-12-30 10:29 1110关于图片延迟加载技术的优点与缺点(来自http://www ... -
js判断父页存在
2010-12-30 10:26 827当你有多个页面有iframe内页时,你肯定也不想别人直接打开子 ...
相关推荐
JavaScript 遮罩层插件是一种常见的前端开发工具,它用于在页面上创建一个半透明的覆盖层,通常用于在用户等待加载数据或执行异步操作时提供视觉反馈。在这个场景中,我们讨论的插件可能名为“LoadMask”或者“lwb_...
js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层
js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得
本文将详细介绍如何使用JS实现这种遮罩层效果,并探讨其在IE、Firefox以及jQuery环境下的应用。 首先,让我们理解遮罩层的基本原理。遮罩层通常由两个主要部分组成:遮罩元素和目标元素。遮罩元素是覆盖在页面上的...
"JS遮罩层 提示层"这个标题所提及的是利用JavaScript技术实现的一种网页交互功能,即在用户界面上创建一个遮罩层或者提示层,通常用于显示重要的消息、警告、选项选择或进行某种操作前的确认。 遮罩层是一种半透明...
封装遮罩层div显示效果,将其放在页面的div中加载
JavaScript遮罩层弹出框是网页交互中常见的一种设计元素,它用于在用户与页面其他内容互动时提供临时的信息展示或者交互操作。这种技术通常结合CSS样式和JavaScript脚本来实现,使得弹出框能够优雅地从页面背景中...
JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层
本主题聚焦于"遮罩层js",这是一个基于jQuery和sliphover库实现的JavaScript代码,它允许开发者创建具有多样性和自定义功能的遮罩层。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...
本资源包含四种JS遮罩层库:GreyBox v5.53、Lightbox Gone Wild、litebox-2.4,这些工具可以帮助开发者轻松实现各种动态遮罩层效果。 1. GreyBox v5.53: GreyBox是一款强大的JavaScript插件,它允许你在当前页面...
在本主题中,我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭,并结合loading图片以增强用户体验。 一、JavaScript基础 JavaScript是一种广泛使用的客户端脚本语言,它可以直接在用户的浏览器中运行,...
标题中的"超级爽的 js 遮罩层 谦容 FF IE 支持拖动"意味着我们找到了一个高效且具有良好用户体验的解决方案,它不仅能在多种浏览器上运行,还支持用户对遮罩层进行拖动操作。下面将详细介绍这个知识点。 首先,遮罩...
这种效果通常通过JavaScript(JS)配合CSS来实现,其中涉及到的技术包括页面元素禁用、遮罩层创建以及Ajax无刷新加载。下面我们将详细讨论这些知识点。 1. **JS变灰页面**: 在JavaScript中,我们可以使用DOM操作...
"遮罩层 javascript js 数据提交"这个主题涉及到的是如何在JavaScript中实现一个遮罩层,并在用户点击提交按钮时,利用JavaScript处理数据提交的过程。在此过程中,遮罩层的出现和消失以及提交操作的执行,都是通过...
在JavaScript编程中,"弹出遮罩层"是一种常见的用户界面设计手法,它通常用于创建一个半透明的覆盖层,以突出显示特定区域或者暂停其他交互,为用户提供一种聚焦的体验。例如,当我们需要显示模态对话框、加载提示...
"js 页面全部遮罩层"这个话题涉及到使用JavaScript(通常借助jQuery库)来实现全屏遮罩效果,包括阻止鼠标滚动和键盘上下键的操作。以下是对这个主题的详细讲解: 首先,我们需要理解遮罩层的基本概念。遮罩层通常...
接下来,我们编写JavaScript代码(假设文件名为`main.js`)来处理按钮点击事件和遮罩层的显示与隐藏: ```javascript document.getElementById('toggleMask').addEventListener('click', function() { var mask = ...
通过以上步骤,我们就实现了一个基本的JavaScript遮罩层。当然,这个遮罩层还可以进一步优化,比如添加过渡动画、响应式设计、兼容性处理等。在实际开发中,可以结合现有的库和框架,如jQuery或Vue.js,来更高效地...
在JavaScript中实现遮罩层,通常涉及到DOM操作、CSS样式设置和事件监听。关键在于创建一个DOM元素(通常是div),为其设置合适的CSS样式,如背景颜色、透明度、位置等,使其覆盖整个页面或指定区域。 标题“遮罩层 ...
综上所述,"js弹出遮罩层"是一个结合了HTML、CSS和JavaScript技术的功能,它提供了良好的用户体验,让用户能够专注于当前的操作,而不会被其他页面元素所干扰。在实际开发中,还可以根据需求进一步优化,比如添加...