jquery-dialog对话框的实现

来源:互联网 发布:我的世界手机版js制作 编辑:程序博客网 时间:2024/05/22 03:24
<!--引入jquery类库文件--><script src="js/jquery-1.7.1.min.js"></script><script src="js/jquery-ui-1.8.18.custom.min.js"></script><!--引入css样式类库--><link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.18.custom.css"  />/*juqery代码部分*/<script>$(function (){   //注册对话框  $('#dialog').dialog({    autoOpen:false,  //设置对话框打开方式 不是自动打开    show:'blind',    //打开时的动画效果    hide:'explode',  //关闭时的动画效果    modal:ture,      //遮罩效果 false:非遮罩效果    title:'添加用户操作界面',  //对话框标题    position:'top',   //打开对话框的位置  top left rigth    width:200,        //代表的是对话框的宽度    height:200,       //代表的是对话框的高度    drag:function(event,ui){     //可以测试 对话框当前的坐标位置     $('#dialog').html('我来拽哈!');      }   });//触发连接事件 当你点击 连接 打开一个对话框 $('#dialog_link').click(function (){   $('#dialog').dialog('open');   });});</script>/*html代码部分*/<h1>模拟dialog对话框效果</h1><!--创建一个连接--><a href="#" id="dialog_link" class="ui-state-default "><span></span>open  dialog</a><!--div对话框 $('#dialog').dialog(); 它就成了一个对话框 在页面中就会隐藏--><div id="dialog" title='hi'>嘿嘿</div>效果图:1.         2.  3.  当拖动时显示3

原创粉丝点击