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

最新推荐文章于 2023-09-17 12:23:20 发布

置顶 __GYT

最新推荐文章于 2023-09-17 12:23:20 发布

阅读量2.7k

点赞数

文章标签： jquery插件 function dialog jquery stylesheet javascript

本文链接：https://blog.csdn.net/Oo__YAN/article/details/7404809

版权

<!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>

打开效果：

关闭时的爆炸效果如下：

__GYT

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery插件弹出窗口爆炸效果！

tabs效果 //当窗体加载完毕的时候触发该匿名函数//$(document) //把dom对象转换成jquery对象---//$(document).ready(function (){}); jquery方法 $(function (){ //注册对话框 $("#dialog").dialog({ autoOpen:false, //设置
复制链接

扫一扫