<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script>
<style type="text/css">
#dialog-overlay {
width: 100%;
height: 100%;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
position: absolute;
background: #000;
top: 0;
left: 0;
z-index: 3000;
display: none;
}
#dialog-box {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #eee;
width: 328px;
position: absolute;
z-index: 5000;
display: none;
}
#dialog-box .dialog-content {
text-align: left;
padding: 10px;
margin: 13px;
color: #666;
font-family: arial;
font-size: 11px;
}
a.button {
margin: 10px auto 0 auto;
text-align: center;
background-color: #e33100;
display: block;
width: 50px;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
position: relative;
cursor: pointer;
}
a.button:hover {
background-color: #c33100;
}
#dialog-box .dialog-content p {
font-weight: 700;
margin: 0;
}
#dialog-box .dialog-content ul {
margin: 10px 0 10px 20px;
padding: 0;
height: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('a.btn-ok, #dialog-overlay, #dialog-box').click(function() {
$('#dialog-overlay, #dialog-box').hide();
return false;
});
$(window).resize(function() {
if (!$('#dialog-box').is(':hidden'))
popup();
});
});
//Popup dialog
function popup(message) {
var maskHeight = $(document).height();//重点
var maskWidth = $(window).width();//重点
var dialogTop = (maskHeight / 2) - ($('#dialog-box').height() / 2);//重点
var dialogLeft = (maskWidth / 2) - ($('#dialog-box').width() / 2);//重点
$('#dialog-overlay').css({
height : maskHeight,
width : maskWidth
}).show();
$('#dialog-box').css({
top : dialogTop,
left : dialogLeft
}).show();
$('#dialog-message').html(message);
}
</script>
</head>
<body
onload="popup('abc')">
<a href="javascript:popup('abc')">猛击此处，弹出层!</a>
<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message"></div>
<a href="#" class="button">关闭</a>
</div>
</div>
</body>
</html>
分享到：
相关推荐
本教程将深入探讨如何使用jQuery实现“超好用的弹出框和遮盖层”。 首先，让我们理解弹出框（Popup）和遮盖层（Overlay）的基本概念。弹出框通常用于在用户与页面交互时显示额外信息或提供交互界面，如警告、确认...
为了实现更复杂的弹出效果，可以使用jQuery的动画功能，如淡入淡出（`.fadeIn()`和`.fadeOut()`)，使遮盖层和弹出框的显示和隐藏更加平滑自然。此外，还可以使用`.append()`或`.prepend()`方法将弹出框内容动态添加...
标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中提到，通过查看demo中的`layout.html`页面可以直观地看到效果，并且实现这一功能并不需要在父页面中编写子页面的JavaScript或弹出框代码，所有...
遮罩层是弹出框设计中的常见元素，它用于遮盖背景页面，使弹出框成为焦点。在jQuery中，可以通过创建一个全屏的div元素，并设置合适的背景颜色和透明度，来实现遮罩层的效果。然后将遮罩层与弹出框一起定位，以达到...
模态弹出框在打开时会遮盖页面背景，使用户专注于当前的任务。Bootstrap的弹出框可以通过修改其CSS类来定制，如改变背景透明度、边框宽度、按钮颜色等。 为了增强用户体验，弹出框还应该考虑以下几点：确保清晰易读...
实现这种效果，通常需要对CSS进行布局调整，以确保弹出框在页面中央，并遮盖背景内容。 5. **表单验证**：为了保证输入数据的有效性，登录表单通常会包含简单的验证。这可能包括检查用户名和密码是否为空，或者密码...
- 使用JavaScript或jQuery来控制弹出框的显示与隐藏。例如，当某个事件触发（如点击按钮或接收服务器消息）时，显示弹出框；点击关闭按钮或点击遮罩层时，隐藏弹出框。 - 可以添加动画效果，如淡入淡出、滑动等，...
弹出层，也称为模态窗口，是在用户与网页交互时临时出现在页面上的一个浮动元素，它遮盖住背景内容，直到用户与弹出层进行交互或关闭它。弹出层可以用于展示详细信息、进行表单填写、播放媒体等，而不干扰用户对主...
"Jquery做的遮盖层"是一个常见的需求，用于在网页上创建一个半透明的覆盖层，通常用于加载提示、弹出框或阻止用户在特定操作期间与页面交互。以下是对这个主题的详细讲解： 首先，让我们理解遮盖层（Overlay）的...
通常，它会遮盖住背景页面，用户必须关闭弹出框后才能继续与背景交互。弹出框的设计包括样式、大小、位置以及关闭按钮等元素，需要确保其不影响用户体验，同时能够清晰地展示内容。 2. **图片轮播**：图片轮播是一...
在这个案例中，jQuery被用来控制弹出菜单的显示和隐藏，以及处理用户与菜单的交互。通过简单的jQuery选择器和方法，我们可以快速地定位到页面元素，并实现复杂的动态效果。 HTML5作为现代Web开发的标准，提供了许多...
6. **遮盖IE6的select**：在IE6中，弹出窗口可能会被下拉选择框（select）遮挡，这是一个已知的兼容性问题。为了解决这个问题，可能采用了特定的CSS或JavaScript技巧，如设置更高的z-index值或在弹出窗口下方添加一...
"jquery 弹出模态窗体"是jQuery中的一个功能，用于创建交互式用户体验，使得用户在不离开当前页面的情况下能够与额外的信息或功能进行交互。模态窗体（Modal Dialog）通常被用来显示警告、确认、信息或表单填写等...
今天我们要来分享一款基于jQuery的弹出层对话框插件，该插件包含多种对话框类型，比如提示框、确认框等。更为实用的是，这款jQuery对话框中的按钮事件也可以被我们所捕获，从而相应对话框按钮的各种事件，用起来非常...
模态对话框在页面上创建了一个浮层，遮盖了背景内容，使得用户只能与弹出框交互。例如，使用Bootstrap的`modal`，代码可能如下： ```html <!-- 城市列表将放置在这里 --> ``` 城市列表通常以`<select>`...
在本项目"Mvc5jQuery弹出层居中并显示遮罩"中，开发者利用Microsoft的ASP.NET MVC5框架和jQuery库，实现了弹出窗口的居中显示以及半透明遮罩效果，提升了用户界面的美观度和易用性。 首先，我们来了解一下MVC5框架...
在IT行业中，"单击弹出遮盖层"是一个常见的前端交互设计，它涉及到网页UI设计、JavaScript编程以及CSS样式布局等多个技术领域。遮盖层通常用于创建一个半透明的覆盖层，当用户点击某个元素时，遮盖层会出现在整个...
另一个是背景层 `#backgroundPopup`，它通常是半透明的，用于遮盖主页面内容，使弹出框更加突出。这两个元素最初都设置为 `display: none`，在需要时通过JavaScript显示。 6. **样式应用**：为了实现弹出框的视觉...
模态框是一种常见的UI元素，它会在用户与页面交互时弹出，提供额外的信息或者进行某些操作。jQuery库提供了丰富的功能，使得创建动态、交互的网页组件变得简单。 首先，我们来看HTML结构。模态框的基本结构包括一个...
例如，当用户点击某个按钮时，用JavaScript创建一个全屏的遮盖层，然后在上面展示弹出框。 3. **Android SDK**：在Android开发中，`FrameLayout`或`RelativeLayout`可以用来叠加视图，实现遮盖效果。通过调整视图的...