<!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>
分享到：
相关推荐
以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧，开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中，还需要根据不同的项目需求，...
ASP.NET绝对居中弹出层是一种常见的Web应用交互设计，常用于显示重要的信息或进行用户交互，如登录对话框、消息提示或表单提交。在ASP.NET框架中，结合JavaScript和CSS，我们可以创建一个高性能、高用户体验的弹出...
在 Web 开发中，弹出居中背景半透明 div 层是一种常见的交互效果，通过 JavaScript 和 CSS，我们可以轻松实现这种效果。在本文中，我们将详细介绍如何使用 JS+CSS 实现弹出居中背景半透明 div 层的方法。 首先，让...
在网页设计中，"弹出居中DIV窗口，背景逐渐变暗"是一种常见的用户体验设计手法，常用于创建模态对话框、提示信息或者加载等待效果。这种设计可以使用户更加专注于当前的操作，避免背景内容的干扰。下面将详细介绍...
标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题，特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中，"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...
本文将深入探讨如何使用jQuery实现一个对话框效果，即在弹出对话框时，背景变暗并且用户无法操作背景内容，以提供更好的用户体验。 首先，要实现这种效果，我们需要引入jQuery库到我们的HTML文件中。可以使用CDN...
jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化DOM操作，包括实现弹出层的居中对齐。本文将详细介绍如何使用jQuery实现弹出层的绝对居中。 首先，我们需要理解页面布局的基本概念。在HTML和CSS中，...
在 Web 开发中，弹出层是常见的交互效果，通常用于提示信息、确认操作或显示详细信息。本文将详细介绍如何使用 JQuery 实现弹出层始终显示在屏幕正中间。 首先，需要定义弹出层的 HTML 结构和 CSS 样式。 HTML 结构...
### JS弹出层居中可移动技术解析 #### 一、引言 在网页开发过程中，弹出层（Modal）是一种常见的交互设计模式，用于在当前页面上展示额外的信息或功能，而无需重新加载页面。其中，弹出层能够居中显示并且可以被...
总结，jQuery实现弹出层垂直居中效果主要通过结合CSS布局和JavaScript动态计算来完成。理解基本的布局原理和灵活运用jQuery提供的方法，可以帮助开发者创造出适应各种场景的用户体验。通过不断学习和实践，你可以...
弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。
在JS弹出层和弹出DIV效果中，"showMesBox"可能是这个效果的ID或者类名，用于在页面上定位并控制这个弹出元素。"showMesBox"通常会包含一个div元素，通过CSS来定义其样式，如位置、大小、背景色、边框等，使其能够在...
在网页设计中，"不错的弹出层居中效果锁定屏幕" 是一个常见的需求，尤其是在创建模态框、对话框或提示信息时。这个标题描述了一个简单而实用的解决方案，允许弹出层（通常是div元素）在页面中央显示，并且能够固定在...
js弹出层绝对居中（ie，火狐都支持）在不同浏览器上显示效果一样
应该包含了相关的JavaScript代码文件（可能命名为`popup.js`或`jquery.popup.js`）、CSS样式表（如`popup.css`）以及HTML模板（可能为`index.html`），这些文件组合起来便构成了完整的弹出层和遮罩层解决方案。...
"简单精美js弹出层效果"这个主题，就是关于如何使用JavaScript来创建既美观又易于使用的弹出层。 首先，我们需要理解弹出层的基本概念。弹出层，也称为模态窗口或对话框，是在网页主内容上覆盖的一个浮动元素，通常...
【标题】"55、Jquery可关闭的仿微博JS弹出层"涉及到的是使用jQuery库来实现一个具有关闭功能的、类似于微博中常见的轻量级弹出对话框效果。在网页交互设计中，弹出层是一种常用的用户体验设计元素，用于显示额外的...
在网页设计中，"jQuery弹出层"是一种常见的交互元素，用于向用户显示额外的信息、提示或者表单等。标题中的“jquery弹出层鼠标点击弹出层可浮动在屏幕滚动”指的是使用jQuery实现的弹出层功能，当用户点击文字或图片...
CSS还用于设置遮罩层的透明度和全屏覆盖效果，以及确保弹出层在页面中的正确定位，例如居中对齐。 4. **JavaScript 逻辑**：`js`文件是实现弹出层功能的核心。它应该包括事件监听器，如按钮的点击事件，以及相应的...