用javascript 和jquery 实现了一个简单的蒙板效果的div弹出框，仅有的一点动画效果是用jquery做的，其他都是css的样式控制，在ie6下正常，在火狐和opera下显示有问题，再解决，一下是代码展示：
<html>
<head>
<title>弹出DIV</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#mybg").hide();
$("#message_box").hide();
});
function showMsg(){
$("#mybg").show();
$("#message_box").show(300);
}
function closeMsg(){
$("#message_box").hide(300);
$("#mybg").hide();
}
</script>
<body>
<style>
.mybg{
background:#a2a2a2;
width:"100%";
height:"100%";
top:"0";
left:"0";
position:absolute;
z-index:500;
opacity:0.3;
overflow:hidden;
filter:"Alpha(opacity=30)"
}
</style>
<input type="button" value="弹出DIV" onclick="showMsg();"/>
<div id="mybg" class="mybg"></div>
<div id="message_box" style="position:absolute;left:10%;top:10%;width:80%;height:80%;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);z-index:1000;>
<div id= "message" style="border:#036 solid; border-width:1 1 3 1;width:95%;height:95%;background:#fff; color:#036; font-size:12px; line-height:150%;">
<!-- DIV弹出状态行：标题、关闭按钮 -->
<div style="background:#666; height:5%;font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff">
<span style="display:inline;width:150px;position:absolute;font-size:200%">标题项</span>
<span onClick="closeMsg();" style="float:right;cursor:hand;font-size:200%">×</span>
</div>
这里是具体的信息展示，可以是任何html的元素
</div>
</div>
</body>
</html>
是不是很简单啊？
分享到：
相关推荐
JavaScript可以用于检测窗体大小的变化并触发蒙版和弹出框的显示与隐藏，而CSS则用来定义弹出框的样式、蒙版的颜色和透明度，以及两者的位置关系。在实际项目中，开发者可能还会使用库如jQuery UI、Bootstrap的Modal...
当用户在页面上滚动时，某些特定的弹出框（如提示信息、菜单或对话框）需要保持在用户的视野内，这通常通过JavaScript或者CSS来实现。以下是关于这个主题的详细知识点： 1. **JavaScript事件监听**： - **scroll...
总之，"jQuery layout demo 蒙版 bpop 插件"涵盖了Web开发中的关键技术和实践，包括高效布局管理、弹出窗口实现和视觉效果增强。通过深入理解和运用这些知识点，开发者可以创建更具吸引力和交互性的网页应用程序，...
通过修改 `css/pirobox.css` 或创建自己的 CSS 文件，可以改变弹出框的外观，如边框、阴影、按钮样式等。 **5. 功能扩展** Pirobox 不仅支持图片，还可以用于弹出 HTML 内容、SWF 文件等。例如，`intro_ants.swf` ...
在`style.css`中，开发者需要定义相册的布局、图片的样式以及弹出框的样式。这包括但不限于图片的边框、阴影、过渡效果、弹出框的背景颜色、透明度等。这些样式可以极大地影响相册的美观度和用户体验。 至于`jquery...
在网页设计中，有时我们需要创建一个遮罩层（也称为蒙版或对话框）来突出显示特定的内容，例如弹出的提示、警告或者表单填写等。遮罩层通常是半透明的灰色背景，使得用户只能看到和交互位于遮罩层之上的元素。在这个...
在本文中，我们将探讨如何利用Jquery、div和CSS实现一个弹出登录窗口。这个功能在许多网站上都很常见，通常用于用户验证或提供访问受保护内容的方式。下面，我们将详细解析实现这一功能的关键代码和设计原理。 首先...
Sexy Lightbox 2.3是一款基于jQuery库的轻量级图片弹出插件，它旨在为网页中的图像提供优雅、简洁的展示方式，使得用户在点击图片链接后，能够在一个全屏的、具有阴影效果的蒙版中查看大图，提升用户体验。...
本篇将详细讲解弹出窗口及其与遮罩层的配合使用，以及如何实现关闭窗口并刷新或跳转调用页面的功能。 首先，我们来理解什么是弹出窗口。弹出窗口是一种在主界面之外打开的独立窗口，它通常用于显示额外信息或进行...
jQuery Fancybox是一款流行的JavaScript库，专门用于创建轻量级、优雅的图像、媒体和其他内容的弹出展示。它被广泛地用作一个LightBox插件，允许用户在不离开当前页面的情况下预览和查看大图，提升用户体验。下面将...
// 弹出遮罩层和模态框 function openModal() { mask.style.display = 'block'; modal.style.display = 'block'; } // 关闭遮罩层和模态框 function closeModal() { mask.style.display = 'none'; modal....
**图片查看器功能**：Fancybox允许用户点击缩略图后在弹出的蒙版层中全屏查看大图，提供左右箭头切换图片、关闭按钮、图片预加载以及自动调整大小等功能。它支持多种图像格式，如JPEG、PNG、GIF等，并能自动检测图片...
4. **显示窗口蒙版**：窗口蒙版（Modal）常用于创建弹出式对话框，它可以遮盖住背景页面，让用户专注于当前的操作。在JSP中，可以利用JavaScript库如jQuery的modal插件或者React、Vue等现代前端框架来实现。 5. **...
"弹框后禁止遮罩层后面页面滚动（兼容ios和android）"这个主题涉及到的是一个常见的问题，即当弹出一个对话框或者遮罩层时，如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同，需要特定的...
例如，添加滚动效果、弹出框、商品筛选和购物车功能等，都需要JavaScript的支持。 总的来说，“网站-psd源文件.zip”不仅是一个学习资源，也是一个实践平台，让你能够深入理解电商网站的设计流程，提升前端开发技能...
在网页设计中，为了提供良好的用户体验，经常需要在用户点击图片缩略图时弹出一个全屏的图片预览窗口，这就是LightBox效果。zbox是一款优秀的jQuery LightBox插件，它不仅提供了基本的全屏预览功能，还独具匠心地...
在本资源"纯CSS3实现按钮动画效果代码.zip"中，我们主要关注的是如何利用CSS3技术来创建具有动态效果的按钮。CSS3是层叠样式表的最新版本，为网页设计提供了更多丰富的功能和效果，包括动画。下面将详细探讨CSS3在...
在“遮罩进度条”的场景中，用户点击一次按钮后，系统会弹出一个半透明的遮罩层覆盖整个界面，遮罩层中包含一个进度条，显示后台处理的进度。这可以是数据加载、保存操作、提交表单或者任何需要时间完成的任务。遮罩...
如果设计中包含交互元素，如按钮或下拉菜单，需要使用JavaScript或jQuery来实现。这将赋予网页动态功能，提升用户体验。 **步骤7：测试与优化** 在浏览器中预览你的HTML页面，确保它在各种浏览器（如Chrome、Fire...