用jquery中插件dialog实现弹框效果实例代码


Posted in Javascript onNovember 15, 2013
<!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> 
<style type="text/css"> 
#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> 
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js"> 
</script> 
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.18.custom.min.js"> 
</script> 
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/> 
<script type="text/javascript" language="javascript"> 
$(function(){ 
    $("#dialog").dialog({ 
        autoOpen:false, 
        buttons:[{ 
            text:"ok", 
            click:function(){ 
                $("#dialog").dialog("close"); 
                } 
            }, 
            { 
            text:"cancal", 
            click:function(){ 
                $("#dialog").dialog("close"); 
                } 
            } 
            ], 
            position:"top",//弹出位置 
            width:600, //窗口宽度 
            height:200, 
            drag:function(){ 
                alert("你干拽我试试"); 
                }          
        }); 
    $("#dialog_link").click(function(){ 
        $("#dialog").dialog("open"); 
        }); 
    }) 
</script> 
</head> 
<body> 
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a> 
<!--对话框$("#dialog").dialog()他就是一个对话框,在页面中就会隐藏--> 
<div id="dialog" title="Hi" style="display:none"> 
hello 
</div> 
</body> 
</html>
<!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>
<style type="text/css">
#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>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.18.custom.min.js">
</script>
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" language="javascript">
$(function(){
 $("#dialog").dialog({
  autoOpen:false,
  buttons:[{
   text:"ok",
   click:function(){
    $("#dialog").dialog("close");
    }
   },
   {
   text:"cancal",
   click:function(){
    $("#dialog").dialog("close");
    }
   }
   ],
   position:"top",//弹出位置
   width:600, //窗口宽度
   height:200,
   drag:function(){
    alert("你干拽我试试");
    }
  });
 $("#dialog_link").click(function(){
  $("#dialog").dialog("open");
  });
 })
</script>
</head>
<body>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<!--对话框$("#dialog").dialog()他就是一个对话框,在页面中就会隐藏-->
<div id="dialog" title="Hi" style="display:none">
hello
</div>
</body>
</html>
Javascript 相关文章推荐
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 #Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 #Javascript
当json键为数字时的取值方法解析
Nov 15 #Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 #Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 #Javascript
Knockout text绑定DOM的使用方法
Nov 15 #Javascript
Knockout visible绑定使用方法
Nov 15 #Javascript
You might like
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
一个php作的文本留言本的例子(六)
2006/10/09 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
基于datagrid框架的查询
2013/04/08 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
javascript简易画板开发
2020/04/12 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
python Xpath语法的使用
2020/11/26 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
Java程序员面试90题
2013/10/19 面试题
函授教育个人学习的自我评价
2013/12/31 职场文书
六年级学生评语
2014/04/22 职场文书
公积金接收函格式
2015/01/30 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers