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

AJAX分页的代码(后台asp.net)

Feb 14 Javascript

用javascript读取xml文件读取节点数据

Aug 12 Javascript

JavaScript使用位运算符判断奇数和偶数的方法

Jun 01 Javascript

jquery使用ul模拟select实现表单美化的方法

Aug 18 Javascript

JavaScript基本语法学习教程

Jan 14 Javascript

Vue.js 表单校验插件

Aug 14 Javascript

清除输入框内的空格

Dec 21 Javascript

fullCalendar中文API官方文档

Feb 07 Javascript

Angular-Ui-Router+ocLazyLoad动态加载脚本示例

Mar 02 Javascript

vue pages 多入口项目 + chainWebpack 全局引用缩写说明

Sep 21 Javascript

vue使用vant中的checkbox实现全选功能

Nov 17 Vue.js

js实现圆形菜单选择器

Dec 03 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 fread()使用技巧

2010/01/22 PHP

PHP类中Static方法效率测试代码

2010/10/17 PHP

PHP和C#可共用的可逆加密算法详解

2015/10/26 PHP

PHP实现RSA签名生成订单功能【支付宝示例】

2017/06/06 PHP

PHP中引用类型和值类型功能与用法示例

2019/02/26 PHP

Smarty模板语法详解

2019/07/20 PHP

javascript string字符串优化问题

2011/07/31 Javascript

40款非常有用的 jQuery 插件推荐（系列一）

2011/12/21 Javascript

JavaScript实现拼音排序的方法

2012/11/20 Javascript

jsPDF生成pdf后在网页展示实例

2014/01/16 Javascript

使用javascript实现Iframe自适应高度

2014/12/24 Javascript

js时间戳和c#时间戳互转方法(推荐)

2017/02/15 Javascript

JavaScript实现三级级联特效

2017/11/05 Javascript

微信小程序授权登录及解密unionId出错的方法

2018/09/26 Javascript

微信小程序基础教程之worker线程的使用方法

2019/07/15 Javascript

JS中的算法与数据结构之常见排序（Sort）算法详解

2019/08/16 Javascript

vue el-upload上传文件的示例代码

2020/12/21 Vue.js

python计算最大优先级队列实例

2013/12/18 Python

使用python为mysql实现restful接口

2018/01/05 Python

python清空命令行方式

2020/01/13 Python

使用遗传算法求二元函数的最小值

2020/02/11 Python

Anaconda+VSCode配置tensorflow开发环境的教程详解

2020/03/30 Python

python获取响应某个字段值的3种实现方法

2020/04/30 Python

有关HTML5页面在iPhoneX适配问题

2017/11/13 HTML / CSS

俄罗斯首家面向中国消费者的一站式购物网站：Wruru

2020/05/08 全球购物

建筑专业毕业生推荐信

2013/11/21 职场文书

初一体育教学反思

2014/01/29 职场文书

授权委托书样本

2014/04/03 职场文书

高三毕业寄语

2014/04/10 职场文书

关于读书的演讲稿1000字

2014/08/27 职场文书

祖国在我心中演讲稿200字

2014/08/28 职场文书

教师个人师德总结

2015/02/06 职场文书

我是特种兵观后感

2015/06/11 职场文书

《追风筝的人》：人心中的成见是座大山，但请不忘初心

2019/11/15 职场文书

创业计划书之闲置物品置换中心

2019/12/25 职场文书

基于PyQt5制作一个群发邮件工具

2022/04/08 Python