jquery学习模拟Dialog效果

原创 2012年03月28日 17:36:03
<!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>效果</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
    
    <script type="text/javascript">
    $(function(){
      $("#dialog").dialog({
 autoOpen:false,  //设置对话框打开的方式  不是自动打开
 show:"blind",  //打开时的动画效果
 hide:"explode",  //关闭时的动画效果
 modal:true,       //true遮罩效果  false非遮罩效果
/*  //buttons的第一种方法  
 buttons:{
 //添加按钮的操作
 "确定":function(){
 //alert("提交");
 $(this).dialog("close");  //关闭对话框
 },
 "取消":function(){
 //alert("确定取消吗");
   $(this).dialog("close");  //关闭对话框


 }
 },*/
 //buttons的第二种方法:
buttons:[
 {
 text:"ok",
 click:function(){
 $(this).dialog("close");
 }
 },{text:"取消",
 click:function(){
 $(this).dialog("close");
 }
 }
],
 
 draggable:false,  //true表示可以拖动(默认的),false不可以拖动
 closeOnEscape:false,  //是否采用esc键关闭对话框,false不采用。true采用,为默认的
 title:"添加用户操作界面",  //对话框的标题
 position:"top",   //对话框弹出的位置(top  left  right center bottom 默认值是center)
     width:600,   //对话框的宽度
 height:300,   //对话框的高度
     resizable:false,  //是否可以改变的操作 true可以改变尺寸,默认值为true
 zIndex:6,

 });  
//触发连接的事件 当你点击时 连接 打开一个对话
 $("#dialog_link").click(function(){
         $("#dialog").dialog("open");  //open参数 作业 打开对话框
 });
 
    });
    </script>
    
    <style>
    
    
    
    
    </style>
    
</head>


<body>
<h1>模拟Dialog效果</h1>


<a href="#" id="dialog_link"><span class="ui-icon ui-icon-newwin"></span>open Dailog</a>


<!--div对话框 $$("#dialog").dialog("open"); 他就成了一个对话框 在页面终究会隐藏-->


<div id="dialog" title="hi!"> 
hello!


</div>




</body>
</html>

相关文章推荐

jquery插件——模拟dialog效果案例

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...

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

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

android dialog 模拟新浪、腾讯title弹框效果

首先我们看一下新浪微博的效果(其它就是一个dialog):                                                       点击title前      ...

模拟dialog效果

$(function(){ //注册对话框 $("#dialog").dialog({ autoOpen:false , //设置对话框的打开方式不是自动打开 ...

用jquery中插件dialog实现弹框效果

弹框遮罩效果 #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog...

jQuery插件--dialog效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...

jquery模拟实现仿select效果

本着服务为人民的远大理想,最近写了个jquery模拟select效果的小东东,挺好用,分享下。 可以直接在我上传的资源里下载压缩包,下载地址:jquery模拟实现仿select效果。 首先,上html...

android on qt 之模拟jquery-mobile控件的box-shadow效果

一.背景图片描述   1. 名称定义 在Qt的控件中,加入类似CSS3的box-shodow的阴影效果。由于QSS不支持box-shodow属性,故而通过截图拼凑来模拟。            ...

jQuery模拟百度新闻不间断滚动效果,支持文字、图片水平垂直滚动

转自:http://www.cnblogs.com/yangjunhua/archive/2013/01/11/2856556.html e.g 1 jQuery ...

模拟电子签章盖章效果的jQuery插件源码

转自http://www.jquerycn.cn/a_5675 客户提了个需求,需要在已审核的文档上加盖公章,网上找了找没有现成的,自己动手丰衣足食 老规矩,上图看效果: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery学习模拟Dialog效果
举报原因:
原因补充:

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