`
123629996
  • 浏览: 291112 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

javascript and jquery 实现蒙板弹出框

jQueryJavaScriptUIOperaCSS 
阅读更多

用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的键盘键码表
评论
2 楼 123629996 2010-11-13  
66573334 写道
jquery ui里面有个 window ，可以实现全部功能...不过比你的加载起来要慢，用了，谢谢

我这个只是个简单的例子，jquery ui库很强大
1 楼 66573334 2010-11-10  
jquery ui里面有个 window ，可以实现全部功能...不过比你的加载起来要慢，用了，谢谢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics