jquery-dialog对话框的实现

最新推荐文章于 2022-11-11 12:35:06 发布

齐雪松

最新推荐文章于 2022-11-11 12:35:06 发布

阅读量2.8k

点赞数

文章标签： dialog stylesheet function jquery class html

本文链接：https://blog.csdn.net/qxs101307204/article/details/7403871

版权

这篇博客介绍了如何利用jQuery和jQuery UI库创建一个dialog对话框。通过引入相应的JS和CSS文件，设置对话框的属性如自动打开、动画效果、遮罩层等，并通过jQuery代码实现对话框的打开和拖动时的交互功能。HTML部分展示了对话框的基本结构和触发对话框显示的链接。

摘要由CSDN通过智能技术生成

<!--引入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(&#