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

原创 2012年03月28日 21:40:49
<!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>


打开效果:


关闭时的爆炸效果如下:



jQuery 技巧大全(新手入门篇)

一、简介 1.1、概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bin...
  • kacoro
  • kacoro
  • 2012年01月13日 21:08
  • 215

10 个技巧助你写出卓越的jQuery插件

目前网络中存在大量能够实现各种功能的jQuery插件,有的插件表面上看很不错,但在实际使用过程中会出现很多问题。而大多数插件只要再加入一点点额外的功能,就能从“优秀”变成“卓越”,并且有更广泛的用处。...
  • kacoro
  • kacoro
  • 2012年03月31日 18:25
  • 224

jQuery插件(右下弹出窗口)

  • 2008年12月11日 11:40
  • 17KB
  • 下载

Dialog弹出层Jquery插件多种效果版

  • 2014年11月14日 17:08
  • 69KB
  • 下载

Jquery插件之信息弹出框showInfoDialog(成功、错误、警告、通知)

功能:zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog,该插件对背景进行遮罩,然后弹出信息显示框,信息显示种类包括: 一、信息种类说明: 1.1、操作成...

jquery插件 案例:弹出对话框 插入表格

通过对话框table添加tr $(document).ready(function (){ $("#dialog").dialog({ autoOpe...

JQuery插件第十五个:弹出框

打开弹出框 var popup={ overlay:null, //此处放在弹出窗体页面,关闭按钮类设为 pClose dyniframesize:function ...

jquery插件封装:弹出iframe模式框

在web开发过程中我们经常需要弹出Iframe页面来加载另外一个页面来显示操作或显示数据,在关闭iframe后又是需要执行某一个回调函数。以下插件能够以较少的代码实现该功能并具有较好的扩展性。下...

bootstrap中jquery插件——警告框、工具提示框、弹出框、模态框

bootstrap的JavaScript插件中提供了几种形式的提示框。其中就有警告框、工具提示框、弹出框和模态框。下面就来一个一个的看看它们是怎样使用的吧!警告框 它就是这个样子的,点击右侧的小叉子...

自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件弹出窗口爆炸效果!
举报原因:
原因补充:

(最多只允许输入30个字)