jQuery插件--dialog效果

原创 2012年03月28日 19:09:44

<!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 language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<link type="text/css" href="./css/jquery-ui-1.8.18.custom.css" rel="stylesheet">
<script type="text/javascript" language="javascript">
    //当窗体加载完毕的时候 触发该匿名函数
    //$(document)//把dom对象转换成jquery对象
 //$(document).ready(function (){});
   $(function (){
        $("#dialog").dialog({
    autoOpen:false,//设置对话框打开的方式 不是自动打开
    show:"blind", //打开时的动画效果
    hide:"explode", //关闭时的动画效果     
       modal:true, //遮罩效果
   /* buttons:{//添加按钮操作
      "确定":function (){
      $(this).dialog("close");//关闭对话框
       },
       "取消":function (){
       alert("提交");
       }
     },*/
   buttons:[
     {
      text:"ok",
      click:function (){
     $(this).dialog("close");//关闭对话框 
       }
      },
      {
      text:"取消",
      click:function (){
     $(this).dialog("close");//关闭对话框 
       }
      }
      ],
    draggable:true, //是否可以拖动效果  true可以 false 不可以
    closeOnEscape:false ,//是否使用esc键退出对话框 默认值为true
    title:"天际用户操作界面",
//对话框的标题
            position:"top",//对话框弹出的位置 默认center
   width:600 ,//对话框的宽度
   height:300,
   resizable:false, //是否可以改变尺寸的操作 默认为true
   zIndex:6, //层叠效果
   drag:function(event,ui){
    //
    }
    });
   //触发连接的事件,当你点击链接 打开一个对话框
  $("#dialog_link").click(function (){
   $("#dialog").dialog("open");//open参数 作用 打开对话框
   });
  //获取设置的options中的参数值
  var modalValue=$("#dialog").dialog("options","modal");
  //alert(modalValue);
  //重新设置属性
  $("#dialog").dialog("options","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>Open Dialog</a>
  <!--div 对话框  他就成了一个对话框 在页面会隐藏-->
 <div id="dialog" title="hi!">hello</div>
 
</body>
</html>

效果图:

相关文章推荐

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

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

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

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

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

6个免费的翻页效果jquery插件

在过去的三到五年web开发世界,jQuery的引入和流行已经取得重大的进展。Web开发人员和程序员,不断引进新的概念和方法,创建类似Flash惊人效果,然而:Flash变得过时了,Flash正在越来越...

jquery插件实现手风琴效果!

手风琴的效果 $(document).ready(function (){ // var option = { hrader: "h3",s}; [{},{},{}]; ...
  • Oo__YAN
  • Oo__YAN
  • 2012年03月28日 21:20
  • 3025
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件--dialog效果
举报原因:
原因补充:

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