jquery-dialog对话框的实现

原创 2012年03月28日 17:39:25
<!--引入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

jquery+css实现自定义对话框功能(不使用插件)

当今网络上各种jquery对话框插件层出不穷,可是我为什么要放弃这些插件选择自己使用jquery和css来自定义对话框的呢?有两方面的原因,一个是有利于自己更加深入的了解css和jquery的特性,另...
  • csu_passer
  • csu_passer
  • 2017年04月21日 20:53
  • 20103

jquery+css实现自定义对话框功能(不使用插件)

当今网络上各种jquery对话框插件层出不穷,可是我为什么要放弃这些插件选择自己使用jquery和css来自定义对话框的呢?有两方面的原因,一个是有利于自己更加深入的了解css和jquery的特性,另...
  • csu_passer
  • csu_passer
  • 2017年04月21日 20:53
  • 20103

很简单的jquery弹出对话框

弹出框 .dialog-mask{position:fixed;left:0;top:0;right:0;bottom:0;background:#000;filter:alpha...
  • robinhunan
  • robinhunan
  • 2017年04月18日 12:59
  • 810

简易jQuery对话框组件、弹窗插件

xyPop是一个轻巧且高度兼容的jQuery简易版插件,可让你的网页交互达到急速用户体验。 功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持四个方向定位(上/下...
  • xiaoyan_2015
  • xiaoyan_2015
  • 2016年01月27日 16:20
  • 2412

jQuery 精简版弹出对话框层

原文地址:http://wange.im/jquery-dialog-layer.html 弹出对话框在一个网站中是相对比较常见的功能,无论是确认信息还是注册申请,都可能会用到弹出层。用 JS 来实...
  • johnstrive
  • johnstrive
  • 2014年12月18日 23:07
  • 1176

jQuery实现单击按钮遮罩弹出对话框(1)

看到网上一位大神的代码后,大概进行了注释,调试了一下页面
  • laixiaobailing
  • laixiaobailing
  • 2014年08月28日 19:47
  • 1653

结合jQuery的unload方法实现JS退出页面弹出对话框

http://www.rainweb.cn/article/113.html 注:经验证有效。 如果在退出页面时需要弹出对话框,提示用户将要退出页面,类似当设置某个功能时而没有保存...
  • zxygww
  • zxygww
  • 2015年08月13日 16:23
  • 1295

Jquery实现模态窗口—simplemodal

QQ邮箱里面的邮件删除,弹出确认对话框是不是很好看,是的,它看起来实现很复杂,其实不然,现在Jquery插件已经很方便的让你来实现这些功能,那就是我们的simplemodal插件。网上可以下载相应的插...
  • sad_hopedream
  • sad_hopedream
  • 2013年12月19日 23:08
  • 2601

深入浅出jQuery (五) 如何自定义UI-Dialog?

前言 随着Web网页的开速度,jQuery库越来越不能满足开发人员的需要,慢慢的有人开发出来了jQuery-UI库,专门用来设计Web前端的界面库,我们只需在程序中引入这个库即可轻松便捷的设计出...
  • lilongsheng1125
  • lilongsheng1125
  • 2013年03月20日 09:18
  • 10203

文件夹选择对话框 JS实现的两种方案

/**  * browseFolder.js  * 该文件定义了BrowseFolder()函数,它将提供一个文件夹选择对话框  * 以供用户实现对系统文件夹选择的功能  * 文件夹选...
  • hefeng841546281
  • hefeng841546281
  • 2014年03月06日 15:14
  • 6200
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery-dialog对话框的实现
举报原因:
原因补充:

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