读书人

javascript and jquery 兑现蒙板弹出框

发布时间: 2012-10-29 10:03:53 作者: rapoo

javascript and jquery 实现蒙板弹出框

用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" 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库很强大

读书人网 >JavaScript

热点推荐