关闭

jQuery插件--dialog效果

1180人阅读 评论(0) 收藏 举报

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

效果图:

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:106507次
    • 积分:2020
    • 等级:
    • 排名:第19707名
    • 原创:95篇
    • 转载:13篇
    • 译文:2篇
    • 评论:13条
    文章分类
    最新评论