编程 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 数组运用实现代码

Apr 13 Javascript

各浏览器对click方法的支持差异小结

Jul 31 Javascript

JSON.stringify 语法实例讲解

Mar 14 Javascript

js动态修改整个页面样式达到换肤效果

May 23 Javascript

js实现YouKu的漂亮搜索框效果

Aug 19 Javascript

javascript实现保留两位小数的多种方法

Dec 18 Javascript

Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

Feb 02 Javascript

javascript实现任务栏消息提示的简单实例

May 31 Javascript

JavaScript原生编写《飞机大战坦克》游戏完整实例

Jan 04 Javascript

Angular.js ng-file-upload结合springMVC的使用教程

Jul 10 Javascript

总结js函数相关知识点

Feb 27 Javascript

JavaScript计算出两个数的差值

Mar 19 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 提速工具eAccelerator 配置参数详解

2010/05/16 PHP

php防止网站被刷新的方法汇总

2014/12/01 PHP

PHP验证码生成原理和实现

2016/01/24 PHP

详解PHP编码转换函数应用技巧

2016/10/22 PHP

Mac系统完美安装PHP7详细教程

2017/06/06 PHP

laravel model模型定义实现开启自动管理时间created_at,updated_at

2019/10/17 PHP

浅析PHP中的 inet_pton 网络函数

2019/12/16 PHP

range 标准化之获取

2011/08/28 Javascript

Jquery颜色选择器ColorPicker实现代码

2012/11/14 Javascript

如何获取网站icon有哪些可行的方法

2014/06/05 Javascript

JavaScript字符串删除重复字符的方法

2015/12/25 Javascript

JavaScript String 对象常用方法详解

2016/05/13 Javascript

使用jQuery卸载全部事件的思路详解

2017/04/03 jQuery

JS div匀速移动动画与变速移动动画代码实例

2019/03/26 Javascript

js 使用ajax设置和获取自定义header信息的方法小结

2020/03/12 Javascript

Vue3配置axios跨域实现过程解析

2020/11/25 Vue.js

用Python中的字典来处理索引统计的方法

2015/05/05 Python

Python生成密码库功能示例

2017/05/23 Python

使用Python写一个贪吃蛇游戏实例代码

2017/08/21 Python

使用Eclipse如何开发python脚本

2018/04/11 Python

基于Python3.6+splinter实现自动抢火车票

2018/09/25 Python

解决python3捕获cx_oracle抛出的异常错误问题

2018/10/18 Python

Python+OpenCV图片局部区域像素值处理改进版详解

2019/01/23 Python

python 常用日期处理-- datetime 模块的使用

2020/09/02 Python

用python制作个音乐下载器

2021/01/30 Python

美国高级工作服品牌：Carhartt

2018/01/25 全球购物

分公司任命书

2014/06/06 职场文书

领导干部对照检查材料

2014/08/24 职场文书

广告设计专业毕业生自我鉴定

2014/09/27 职场文书

学习十八届四中全会精神思想汇报

2014/10/23 职场文书

2014年教研员工作总结

2014/12/23 职场文书

中学生社区服务活动报告

2015/02/05 职场文书

2015年高校教师个人工作总结

2015/05/25 职场文书

2016年公司“3.12”植树节活动总结

2016/03/16 职场文书

SqlServer数据库远程连接案例教程

2021/07/15 SQL Server

分享一个vue实现的记事本功能案例

2022/04/11 Vue.js