编程 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 相关文章推荐

JS input文本框禁用右键和复制粘贴功能的代码

Apr 15 Javascript

JavaScript 构造函数面相对象学习必备知识

Jun 09 Javascript

JQuery防止退格键网页后退的实现代码

Mar 23 Javascript

JavaScript包装对象使用介绍

Aug 29 Javascript

JS控制一个DIV层在指定时间内消失的方法

Feb 17 Javascript

写给小白的JavaScript引擎指南

Dec 04 Javascript

详解JavaScript基于面向对象之继承实例

Dec 16 Javascript

Angular ng-repeat 对象和数组遍历实例

Sep 14 Javascript

从零学习node.js之模块规范（一）

Feb 21 Javascript

js实现内置计时器

Dec 16 Javascript

微信公众号网页分享功能开发的示例代码

May 27 Javascript

浅谈node.js中间件有哪些类型

Apr 29 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

PHP多例模式介绍

2013/06/24 PHP

php接口和抽象类使用示例详解

2014/03/02 PHP

php定界符

2014/06/19 PHP

PHP SOCKET编程详解

2015/05/22 PHP

浅谈PHP中的错误处理和异常处理

2017/02/04 PHP

php出租房数据管理及搜索页面

2017/05/23 PHP

php远程请求CURL实例教程（爬虫、保存登录状态）

2020/12/10 PHP

11款基于Javascript的文件管理器

2009/10/25 Javascript

纯js分页代码(简洁实用)

2013/11/05 Javascript

javascript制作的简单注册模块表单验证

2015/04/13 Javascript

JavaScript和jQuery获取input框的绝对位置实现方法

2016/10/13 Javascript

JS函数多个参数默认值指定方法分析

2016/11/28 Javascript

js鼠标跟随运动效果

2017/03/11 Javascript

详解Vue双向数据绑定原理解析

2017/09/11 Javascript

jQuery实现列表的增加和删除功能

2018/06/14 jQuery

vue过滤器用法实例分析

2019/03/15 Javascript

javascript使用正则表达式实现注册登入校验

2020/09/23 Javascript

[02:42]DOTA2英雄基础教程杰奇洛

2013/12/23 DOTA

Python编程使用*解包和itertools.product()求笛卡尔积的方法

2017/12/18 Python

python数据抓取分析的示例代码（python + mongodb）

2017/12/25 Python

python 创建一个空dataframe 然后添加行数据的实例

2018/06/07 Python

Python redis操作实例分析【连接、管道、发布和订阅等】

2019/05/16 Python

详解pandas使用drop_duplicates去除DataFrame重复项参数

2019/08/01 Python

python中对_init_的理解及实例解析

2019/10/11 Python

python正则表达式匹配IP代码实例

2019/12/28 Python

Cynthia Rowley官网：全球领先的生活方式品牌

2020/10/27 全球购物

广州一家公司的.NET面试题

2016/06/11 面试题

大学本科生的个人自我评价

2013/12/09 职场文书

找工作求职信

2014/07/07 职场文书

司机岗位职责说明书

2014/07/29 职场文书

2016婚礼主持词开场白

2015/11/24 职场文书

《狼牙山五壮士》教学反思

2016/02/17 职场文书

2019年共青团工作条例最新版

2019/11/12 职场文书

Android存储中最基本的文件存储方式

2022/04/30 Java/Android

Spring Boot优化后启动速度快到飞起技巧示例

2022/07/23 Java/Android

MySQL一劳永逸永久支持输入中文的方法实例

2022/08/05 MySQL