jquery插件弹出窗口爆炸效果！

来源：互联网发布：数据报表的减法编辑：程序博客网时间：2024/05/22 14:54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>tabs效果</title><!----引入jquery类库文件---><script language="javascript" type="text/jscript" src="./js/jquery-1.7.1.min.js"></script><script language="javascript" type="text/jscript" src="./js/jquery-ui-1.8.18.custom.min.js"></script><!----引入css类库文件---><link rel="stylesheet" href="./css/jquery-ui-1.8.18.custom.css" /><script type="text/javascript">//当窗体加载完毕的时候 触发该匿名函数//$(document)   //把dom对象转换成jquery对象---//$(document).ready(function (){});   jquery方法$(function (){//注册对话框$("#dialog").dialog({autoOpen:false,//设置对话框打开方式，不是自动打开show:"blind",   //打开时的动画效果hide:"explode",//关闭时的动画效果modal:true,//是否遮罩，true表示遮罩效果，false表示非遮罩/*buttons:{//添加按钮的操作"确定":function(){ $(this).dialog("close");  //关闭对话框},"取消":function(){ $(this).dialog("close");  //关闭对话框}},*/   //效果同上 buttons:[ {   text:"确定",   click:function (){   $(this).dialog("close");     } },{   text:"取消",   click:function (){   $(this).dialog("close");     }  }],  //是否可以拖动效果  默认值true表示可以拖动默认值false表示不可拖动   draggable:true, //是否采用esc键退出对话框，如果false表示不采用，默认值true表示采用 closeOnEscape:false, //对话框的标题 title:"添加用户操作",  //对话框弹出位置 top bottom center left right 默认值为center position:"center", //对话框宽度 width:400,  //对话框高度 height:200,  //是否可以改变的操作  如果为false表示不可改变大小  默认值为true表示可以改变大小 resizable:false,  //层叠效果 zIndex:1000,  drag:function(event,ui){//可以测试出对话框当前的坐标位置//alert("sdfsdf");}  });//触发连接的事件  当你点击 连接打开一个对话框$("#dialog_link").click(function (){$("#dialog").dialog("open");//open参数， 作用是打开对话框});//怎么获取 设置的option中的参数值var modalValue = $("#dialog").dialog("option","modal");//alert(modalValue);//怎么设置option中的参数值$("#dialog").dialog("option","modal",false);});</script><style>    #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}</style></head><body><h1>模拟dialog效果</h1>    <!--创建一个连接--><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">点击打开<span class="ui-icon ui-icon-newwin"></span></a>        <!--div 对话框 $("#dialog").dialog(); 就变成了对话框 在页面中就会隐藏-->    <div id="dialog" title="警告">       你的电脑即将爆炸！    </div>    </body></html>
打开效果：
关闭时的爆炸效果如下：