`

弹出框后背景变暗

    博客分类:
  • JS
阅读更多

网页要做出弹出框后面的背景变暗效果,代码如下:

function show() //显示隐藏层和弹出层
	{
		var hideobj = document.getElementById("hidebg");
		hideobj.style.display = "block"; //显示隐藏层
		hideobj.style.height = document.body.clientHeight + "px"; //设置隐藏层的高度为当前页面高度
		document.getElementById("hidebox").style.display = "block"; //显示弹出层
	}

 然后是隐藏层的代码及其格式:

<style>
#hidebg {
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #000;
	width: 100%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
	filter: alpha(opacity = 60); /*设置透明度为60%*/
	opacity: 0.6; /*非IE浏览器下设置透明度为60%*/
	display: none; 
	z-Index: 2;
}
</style>
<body>
	<div id="hidebg"></div>

 最后还有弹出层:

<div id="hidebox">
			<iframe src="${pageContext.request.contextPath }/manager/shopcar/shopcar.jsp" scrolling="yes" name="shopca" border="0" id="shopca" frameborder="0"
			width="800px" height="300px"></iframe>
		
</div>

 

分享到:
评论

相关推荐

    实现了弹出窗口后背景变灰并屏蔽

    在ASP.NET开发中,"实现了弹出窗口后背景变灰并屏蔽"这一功能通常涉及到对话框(Modal Dialog)的使用,以及页面动态效果的实现。这个功能的主要目的是在弹出一个窗口时,使得主页面变得不可操作,以引导用户专注于...

    背景变暗弹出层 遮蔽层效果

    在IT行业中,用户体验是至关重要的,而背景变暗弹出层和遮蔽层效果就是提升用户体验的一种常见技术。这些效果通常用于创建对话框、模态窗口或者提示信息,以吸引用户的注意力并提供交互式操作。下面我们将详细探讨...

    点击弹出窗口网页背景变暗且不可点的效果(二):iframe实现

    标题中的“点击弹出窗口网页背景变暗且不可点的效果(二):iframe实现”指的是在Web开发中,当用户点击某个元素时,会弹出一个新的窗口或对话框,而此时网页的背景会变暗并且不可交互,这种效果通常用于创建更加聚焦...

    链接弹出层 背景变暗 适合登录框等

    标题中的“链接弹出层 背景变暗 适合登录框等”指的是网页设计中常见的一种交互效果,即当用户点击某个链接时,页面上会弹出一个半透明的遮罩层,背景变暗,突出显示弹出的窗口,通常用于创建登录框、注册表单或通知...

    div+css实现弹出窗口背景变暗效果

    在网页设计中,"div+css实现弹出窗口背景变暗效果"是一种常见的交互设计手法,主要用于提升用户体验,特别是当用户需要关注特定弹出信息时。这种效果通过创建一个覆盖整个页面的半透明div层来实现,使得弹出窗口成为...

    弹出登录页面,背景变暗

    为了实现"背景变暗"的效果,开发者通常会在登录弹出框出现时,为页面添加一个半透明的黑色背景层。这个背景层被称为遮罩层,它的作用是使用户在与弹出窗口交互时暂时忽略背景内容。遮罩层的CSS实现可以通过以下方式...

    登陆弹出页面 背景变暗

    "登陆弹出页面 背景变暗"是一种常见且流行的技术,它会在弹出登录框时将页面背景淡化,使得登录窗口更加突出,增加视觉效果,同时也提高了操作的便捷性。 实现这个效果通常涉及到HTML、CSS和JavaScript这三种核心...

    jquery 弹出登录框 网页变暗.rar

    jquery 弹出登录框 网页变暗,这个效果相信大家已经都很熟悉了,再次与大家分享一个挺不错的弹出式登录框,弹出后网页背景渐变变暗,不是一下子变暗,有动画效果的变暗。本效果调用方法简单,引用了jquery,兼容性也...

    JQuery实现对话框效果 即弹出对话框背景变暗且不可操作

    本文将深入探讨如何使用jQuery实现一个对话框效果,即在弹出对话框时,背景变暗并且用户无法操作背景内容,以提供更好的用户体验。 首先,要实现这种效果,我们需要引入jQuery库到我们的HTML文件中。可以使用CDN...

    弹出提示框,背景压暗蒙版

    当弹出提示框出现时,背景会变暗,这样可以降低其他元素的视觉权重,使用户更容易聚焦于弹出框上的信息。这种压暗效果可以通过调整背景颜色的透明度或者添加一个半透明的灰色层来实现。这样做的好处是,不仅能够创造...

    jQuery点击弹出对话框 背景变暗 支持拖拽.rar

    又一个简洁实用的jquery弹出框插件,可实现弹出提示框、弹出引用其他URL框、弹出确认框,可以设置在屏幕中显示的位置(正中间)、设置弹窗事件、添加窗口...当弹出浮动对话框后,网页背景变暗,弹出层且支持关闭功能。

    jQuery thickbox 弹出框 弹出后网页变暗 插件.rar

    jQuery thickbox 弹出框 弹出后网页变暗 插件,使用thickbox 可用来显示图片弹框和文字的弹框,比如一些登录框之类的,弹出后,网页背景渐变暗下来,操作完成后网页恢复。thickbox和Lightbox插件之类的功能十分相似...

    自定义选择器弹出背景变暗

    简单的弹出视图 基于UIWindow上面创建子视图 对UIPickerView 和 自定义AlertView有兴趣的童鞋可以下载学习分享使用 Q:305814832 Email: ioszhaoyi@163.com

    js实现仿网易点击弹出提示同时背景变暗效果

    本文实例讲述了js实现仿网易点击弹出提示同时背景变暗效果。分享给大家供大家参考。具体如下: 这里仿网易点击弹出提示,背景变暗提示层效果,圆角,美观简洁,代码稍嫌多。 运行效果如下图所示: 在线演示地址如下...

    jQuery CSS3 弹出框插件.rar

    jQuery CSS3 弹出框插件,带阴影效果,自带有10多种用法的演示代码,比如错误框、提示框、文字显示框等,点击示例页下面的按钮,即可弹出对应的提示框效果,测试请使用Chrome、火狐、Opera浏览器,IE11下也表现良好...

    超好的点击后弹出窗口代码,背景变黑(可居中定位)

    这样就能实现点击后背景变暗的效果。 接下来,我们讨论如何实现弹出窗口的居中定位。在HTML中,我们可以创建一个div作为弹出窗口,然后通过CSS的`position`, `top`, `left`, `width` 和 `height` 属性来定位。但更...

    jQuery弹出框插件

    例如,描述中提到的“信息提示弹出层插件”就是一种这样的工具,它具备多种提示功能,设计精美且易于使用,还包含了遮罩效果,使得弹出层在显示时能够使背景页面变暗,从而聚焦用户的注意力。 在使用jQuery弹出框...

    jquery.DOMWindow弹出层与TAB切换实例汇总.rar

    jquery.DOMWindow弹出层与TAB切换实例汇总,jquery.DOMWindow.js是浮动弹出框的核心部件,本插件的弹出框有多种形式,比如它可以弹出不带边框的、带有淡入淡出特效的、各种颜色的背景浮动框、弹出后背景会变暗的浮动...

    点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码

    在网页设计中,点击弹出层效果和弹出窗口后网页背景变暗是常见的交互设计手法,用于增强用户体验,提供更加聚焦的操作环境。这两种效果通常应用于弹窗对话框、模态框或者信息提示等场景。以下是对实现这些效果的代码...

    js登录弹出框.zip

    7. **模态对话框实现**:模态对话框的实现可以借助于CSS的`position:fixed`和`z-index`属性,以及透明遮罩层,使得弹出框始终位于页面顶部,而背景变暗,用户无法直接与背景交互。 8. **响应式设计**:为了适应不同...

Global site tag (gtag.js) - Google Analytics