javascript and jquery 兑现蒙板弹出框
日期：2014-05-16 浏览次数：20391 次
javascript and jquery 实现蒙板弹出框
我这个只是个简单的例子，jquery ui库很强大
用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>
? 是不是很简单啊？
1 楼
66573334
2010-11-10
jquery ui里面有个 window ，可以实现全部功能...不过比你的加载起来要慢，用了，谢谢
2 楼
123629996
2010-11-13
66573334 写道
jquery ui里面有个 window ，可以实现全部功能...不过比你的加载起来要慢，用了，谢谢
我这个只是个简单的例子，jquery ui库很强大
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
