`
zenith.hu
  • 浏览: 16961 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

JS弹出消息提示层,绝对屏幕居中和背景变暗(仿windows关机效果)

阅读更多

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的STYLE*/
html,body {height:100%; margin:0px; font-size:12px;}
.mydiv {
	background-color: #ff6;
	border: 1px solid #f90;
	text-align: center;
	line-height: 40px;
	font-size: 12px;
	font-weight: bold;
	z-index:99;
	width: 300px;
	height: 120px;
	left:50%;/*FF IE7*/
	top: 50%;/*FF IE7*/
	margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
	margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
	margin-top:0px;
	position:fixed!important;/*FF IE7*/
	position:absolute;/*IE6*/
	_top:       expression(eval(document.compatMode &&
				document.compatMode=='CSS1Compat') ?
				documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
				document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}

.bg {
	background-color: #ccc;
	width: 100%;
	height: 100%;
	left:0;
	top:0;/*FF IE7*/
	filter:alpha(opacity=50);/*IE*/
	opacity:0.5;/*FF*/
	z-index:1;
	position:fixed!important;/*FF IE7*/
	position:absolute;/*IE6*/
	_top:       expression(eval(document.compatMode &&
				document.compatMode=='CSS1Compat') ?
				documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
				document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
/*The END*/
</style>
<script type="text/javascript">
	function showDiv(){
		document.getElementById('popDiv').style.display='block';
		document.getElementById('bg').style.display='block';
	}
	function closeDiv(){
		document.getElementById('popDiv').style.display='none';
		document.getElementById('bg').style.display='none';
	}
</script>
</head>
<body>

	<div style="padding-top: 20px;">
	<input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
	</div>
	
	<div id="popDiv" class="mydiv" style="display:none;">恭喜你!<br/>你的成绩为:60分<br/>
	<a href="javascript:closeDiv()">关闭窗口</a></div>
	<div id="bg" class="bg" style="display:none;"></div>
	
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</body>
</html>
 
5
0
分享到:
评论

相关推荐

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧,开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中,还需要根据不同的项目需求,...

    ASP.NET 绝对居中弹出层

    ASP.NET绝对居中弹出层是一种常见的Web应用交互设计,常用于显示重要的信息或进行用户交互,如登录对话框、消息提示或表单提交。在ASP.NET框架中,结合JavaScript和CSS,我们可以创建一个高性能、高用户体验的弹出...

    js+CSS实现弹出居中背景半透明div层的方法.docx

    在 Web 开发中,弹出居中背景半透明 div 层是一种常见的交互效果,通过 JavaScript 和 CSS,我们可以轻松实现这种效果。在本文中,我们将详细介绍如何使用 JS+CSS 实现弹出居中背景半透明 div 层的方法。 首先,让...

    弹出居中DIV窗口,背景逐渐变暗

    在网页设计中,"弹出居中DIV窗口,背景逐渐变暗"是一种常见的用户体验设计手法,常用于创建模态对话框、提示信息或者加载等待效果。这种设计可以使用户更加专注于当前的操作,避免背景内容的干扰。下面将详细介绍...

    弹出层居中

    标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题,特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中,"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...

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

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

    jquery实现让弹出层绝对居中

    jQuery,一个广泛使用的JavaScript库,提供了丰富的功能来简化DOM操作,包括实现弹出层的居中对齐。本文将详细介绍如何使用jQuery实现弹出层的绝对居中。 首先,我们需要理解页面布局的基本概念。在HTML和CSS中,...

    JQuery 弹出层,始终显示在屏幕正中间

    在 Web 开发中,弹出层是常见的交互效果,通常用于提示信息、确认操作或显示详细信息。本文将详细介绍如何使用 JQuery 实现弹出层始终显示在屏幕正中间。 首先,需要定义弹出层的 HTML 结构和 CSS 样式。 HTML 结构...

    js弹出层居中可移动

    ### JS弹出层居中可移动技术解析 #### 一、引言 在网页开发过程中,弹出层(Modal)是一种常见的交互设计模式,用于在当前页面上展示额外的信息或功能,而无需重新加载页面。其中,弹出层能够居中显示并且可以被...

    jQuery弹出层垂直居中效果

    总结,jQuery实现弹出层垂直居中效果主要通过结合CSS布局和JavaScript动态计算来完成。理解基本的布局原理和灵活运用jQuery提供的方法,可以帮助开发者创造出适应各种场景的用户体验。通过不断学习和实践,你可以...

    弹出层(遮罩层)弹出页面垂直居中

    弹出层(遮罩层)弹出页面垂直居中,一个不错的例子,可拿来使用。

    JS弹出层,js弹出DIV效果源码下载

    在JS弹出层和弹出DIV效果中,"showMesBox"可能是这个效果的ID或者类名,用于在页面上定位并控制这个弹出元素。"showMesBox"通常会包含一个div元素,通过CSS来定义其样式,如位置、大小、背景色、边框等,使其能够在...

    不错的弹出层居中效果锁定屏幕

    在网页设计中,"不错的弹出层居中效果锁定屏幕" 是一个常见的需求,尤其是在创建模态框、对话框或提示信息时。这个标题描述了一个简单而实用的解决方案,允许弹出层(通常是div元素)在页面中央显示,并且能够固定在...

    js弹出层绝对居中(ie,火狐都支持)

    js弹出层绝对居中(ie,火狐都支持)在不同浏览器上显示效果一样

    jquery js css弹出居中的遮罩层

    应该包含了相关的JavaScript代码文件(可能命名为`popup.js`或`jquery.popup.js`)、CSS样式表(如`popup.css`)以及HTML模板(可能为`index.html`),这些文件组合起来便构成了完整的弹出层和遮罩层解决方案。...

    简单精美js弹出层效果

    "简单精美js弹出层效果"这个主题,就是关于如何使用JavaScript来创建既美观又易于使用的弹出层。 首先,我们需要理解弹出层的基本概念。弹出层,也称为模态窗口或对话框,是在网页主内容上覆盖的一个浮动元素,通常...

    55、Jquery可关闭的仿微博JS弹出层

    【标题】"55、Jquery可关闭的仿微博JS弹出层"涉及到的是使用jQuery库来实现一个具有关闭功能的、类似于微博中常见的轻量级弹出对话框效果。在网页交互设计中,弹出层是一种常用的用户体验设计元素,用于显示额外的...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    在网页设计中,"jQuery弹出层"是一种常见的交互元素,用于向用户显示额外的信息、提示或者表单等。标题中的“jquery弹出层鼠标点击弹出层可浮动在屏幕滚动”指的是使用jQuery实现的弹出层功能,当用户点击文字或图片...

    js弹出层 下载直接用

    CSS还用于设置遮罩层的透明度和全屏覆盖效果,以及确保弹出层在页面中的正确定位,例如居中对齐。 4. **JavaScript 逻辑**:`js`文件是实现弹出层功能的核心。它应该包括事件监听器,如按钮的点击事件,以及相应的...

Global site tag (gtag.js) - Google Analytics