编程 Javascript

用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检测浏览器flash版本的实现代码

Dec 06 Javascript

jquery插件制作简单示例说明

Feb 03 Javascript

jquery 中多条件选择器,相对选择器,层次选择器的区别

Jul 03 Javascript

javascript学习(二)javascript常见问题总结

Jan 02 Javascript

jQuery删除节点的三个方法即remove()detach()和empty()

Dec 27 Javascript

动态加载js、css等文件跨iframe实现

Feb 24 Javascript

JavaScript中string转换成number介绍

Dec 31 Javascript

javascript中caller和callee详解

Aug 10 Javascript

js弹出窗口返回值的简单实例

May 28 Javascript

js实现显示手机号码效果

Mar 09 Javascript

vue使用element-ui按需引入

May 20 Vue.js

vue实现登陆页面开发实践

May 30 Vue.js

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

深入PHP运行环境配置的详解

2013/06/04 PHP

浅析memcache启动以及telnet命令详解

2013/06/28 PHP

关于php支持分块与断点续传文件下载功能代码

2014/05/09 PHP

PHP简单实现无限级分类的方法

2016/05/13 PHP

基于ThinkPHP5.0实现图片上传插件

2017/09/25 PHP

php 算法之实现相对路径的实例

2017/10/17 PHP

thinkPHP5框架闭包函数与子查询传参用法示例

2018/08/02 PHP

基于mouseout和mouseover等类似事件的冒泡问题解决方法

2013/11/18 Javascript

js文件Cookie存取值示例代码

2014/02/20 Javascript

JavaScript使用cookie记录临时访客信息的方法

2015/04/07 Javascript

jQuery EasyUI框架中的Datagrid数据表格组件结构详解

2016/06/09 Javascript

基于JavaScript实现Tab选项卡切换效果

2016/11/24 Javascript

谈谈因Vue.js引发关于getter和setter的思考

2016/12/02 Javascript

深入理解javascript的getTime()方法

2017/02/16 Javascript

nuxt.js添加环境变量,区分项目打包环境操作

2020/11/06 Javascript

js删除对象中的某一个字段的方法实现

2021/01/11 Javascript

Python实现建立SSH连接的方法

2015/06/03 Python

如何将python中的List转化成dictionary

2016/08/15 Python

Python多线程实现同步的四种方式

2017/05/02 Python

python语言中with as的用法使用详解

2018/02/23 Python

一看就懂得Python的math模块

2018/10/21 Python

Python遍历文件夹处理json文件的方法

2019/01/22 Python

Python通过Manager方式实现多个无关联进程共享数据的实现

2019/11/07 Python

编写python代码实现简单抽奖器

2020/10/20 Python

美国鞋类购物网站：Shiekh Shoes

2016/08/21 全球购物

Jones Bootmaker官网：优质靴子和鞋子在线

2020/11/30 全球购物

比较一下entity bean和session bean

2013/12/27 面试题

计算机专业个人求职信范例

2013/09/23 职场文书

高二英语教学反思

2014/01/19 职场文书

2014办公室副主任四风对照检查材料思想汇报

2014/09/20 职场文书

2015年库房工作总结

2015/04/30 职场文书

2015年党建工作目标责任书

2015/05/08 职场文书

2015年绩效考核工作总结

2015/05/23 职场文书

团委副书记工作总结

2015/08/14 职场文书

高二数学教学反思

2016/02/18 职场文书

MySQL中一条update语句是如何执行的

2022/03/16 MySQL