编程 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 编程引入命名空间的方法

Jun 29 Javascript

json-lib出现There is a cycle in the hierarchy解决办法

Feb 24 Javascript

js点击页面其它地方将某个显示的DIV隐藏

Jul 12 Javascript

简略说明Javascript中的= =(等于)与= = =(全等于)区别

Apr 16 Javascript

js获取当前时间显示在页面上并每秒刷新

Dec 24 Javascript

JavaScript中的函数模式详解

Feb 11 Javascript

jQuery可见性过滤器：hidden和：visibility用法实例

Jun 24 Javascript

bootstrap手风琴制作方法详解

Jan 11 Javascript

vue实现简单表格组件实例详解

Apr 16 Javascript

Swiper自定义分页器使用详解

Dec 28 Javascript

微信小程序之多文件下载的简单封装示例

Jan 29 Javascript

React 源码中的依赖注入方法

Nov 07 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

可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器

2020/03/12 无线电

介绍一些PHP判断变量的函数

2012/04/24 PHP

php中限制ip段访问、禁止ip提交表单的代码分享

2014/08/22 PHP

PHP使用json_encode函数时不转义中文的解决方法

2014/11/12 PHP

PHP实现通过二维数组键值获取一维键名操作示例

2019/10/11 PHP

laravel框架 api自定义全局异常处理方法

2019/10/11 PHP

javascript 窗口加载蒙板内嵌网页内容

2010/11/19 Javascript

Jquery多选框互相内容交换的实例代码

2013/07/04 Javascript

jquery ajax传递中文参数乱码问题及解决方法说明

2014/02/07 Javascript

js实现字符串转日期格式的方法

2015/05/20 Javascript

jquery对复选框(checkbox)的操作汇总

2016/01/13 Javascript

BootStrap tab选项卡使用小结

2020/08/09 Javascript

JavaScript实现重力下落与弹性效果的方法分析

2017/12/20 Javascript

Vue数字输入框组件的使用方法

2019/10/19 Javascript

node 版本切换的实现

2020/02/02 Javascript

python实现自动更换ip的方法

2015/05/05 Python

python解决方案：WindowsError: [Error 2]

2016/08/28 Python

K-means聚类算法介绍与利用python实现的代码示例

2017/11/13 Python

python3人脸识别的两种方法

2019/04/25 Python

使用python 的matplotlib 画轨道实例

2020/01/19 Python

tensorflow中tf.slice和tf.gather切片函数的使用

2020/01/19 Python

Python键鼠操作自动化库PyAutoGUI简介(小结)

2020/05/17 Python

利用PyTorch实现VGG16教程

2020/06/24 Python

药品质量检测应届生求职信

2013/11/14 职场文书

大学生个人自我鉴定

2013/12/03 职场文书

大学生活学习的自我评价

2013/12/03 职场文书

创业计划书撰写原则

2014/01/25 职场文书

节能减排倡议书

2014/04/15 职场文书

会计专业应届生自荐信

2014/06/28 职场文书

战略合作意向书

2014/07/29 职场文书

励志演讲稿800字

2014/08/21 职场文书

产品陈列协议书（标准版）

2014/09/17 职场文书

公司费用报销管理制度

2015/08/04 职场文书

如何理解Vue简单状态管理之store模式

2021/05/15 Vue.js

MySQL之PXC集群搭建的方法步骤

2021/05/25 MySQL

MySQL去除密码登录告警的方法

2022/04/20 MySQL