关闭

jquery-dialog对话框的实现

标签: dialogstylesheetfunctionjqueryclasshtml
2359人阅读 评论(0) 收藏 举报
<!--引入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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:52048次
    • 积分:1112
    • 等级:
    • 排名:千里之外
    • 原创:60篇
    • 转载:5篇
    • 译文:0篇
    • 评论:3条