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

JQUERY 浏览器判断实现函数

Aug 20 Javascript

推荐11款jQuery开发的复选框和单选框美化插件

Aug 02 Javascript

Javascript MVC框架Backbone.js详解

Sep 18 Javascript

jQuery中prop()方法用法实例

Jan 05 Javascript

JS数组的常见用法实例

Feb 10 Javascript

JAVA四种基本排序方法实例总结

Jul 24 Javascript

seajs学习教程之基础篇

Oct 20 Javascript

JS库之ParticlesJS使用简介

Sep 12 Javascript

jquery 一键复制到剪切板的实例

Sep 20 jQuery

javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】

Jun 13 Javascript

详解React 条件渲染

Jul 08 Javascript

HTML+VUE分页实现炫酷物联网大屏功能

May 27 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

哪吒敖丙传：新人物二哥敖乙出场小敖丙奶气十足

2020/03/08 国漫

PHP封装的字符串加密解密函数

2015/12/18 PHP

php数组遍历类与用法示例

2019/05/24 PHP

JavaScript 事件查询综合

2009/07/13 Javascript

浅谈tudou土豆网首页图片延迟加载的效果

2010/06/23 Javascript

javascript学习笔记(九) js对象设计模式

2012/06/19 Javascript

把jQuery的类、插件封装成seajs的模块的方法

2014/03/12 Javascript

利用js制作html table分页示例(js实现分页)

2014/04/25 Javascript

JavaScript模版引擎的基本实现方法浅析

2016/02/15 Javascript

jQuery前端开发35个小技巧

2016/05/24 Javascript

详解JavaScript 中 if / if...else...替换方式

2018/07/15 Javascript

Vue-Quill-Editor富文本编辑器的使用教程

2018/09/21 Javascript

详解关于React-Router4.0跳转不置顶解决方案

2019/05/10 Javascript

LayUI动态设置checkbox不显示的解决方法

2019/09/02 Javascript

解决LayUI数据表格复选框不居中显示的问题

2019/09/25 Javascript

轻松实现python搭建微信公众平台

2016/02/16 Python

python与C互相调用的方法详解

2017/07/14 Python

Python实现的密码强度检测器示例

2017/08/23 Python

python3 http提交json参数并获取返回值的方法

2018/12/19 Python

Python实现账号密码输错三次即锁定功能简单示例

2019/03/29 Python

pyQt5实时刷新界面的示例

2019/06/25 Python

PyQt+socket实现远程操作服务器的方法示例

2019/08/22 Python

numpy求平均值的维度设定的例子

2019/08/24 Python

使用Python测试Ping主机IP和某端口是否开放的实例

2019/12/17 Python

纯css3实现宠物小鸡实例代码

2018/10/08 HTML / CSS

加拿大女包品牌：Matt & Nat

2017/05/12 全球购物

加拿大领先的冒险和户外零售商：Atmosphere

2017/12/19 全球购物

几个常见的软件测试问题

2016/09/07 面试题

歌唱比赛获奖感言

2014/01/21 职场文书

特色冷饮店创业计划书

2014/01/28 职场文书

园艺师求职信

2014/04/27 职场文书

租房协议书

2014/09/12 职场文书

法院干警四风问题个人对照检查材料思想汇报

2014/10/07 职场文书

运动会三级跳加油稿

2015/07/21 职场文书

详细聊聊vue中组件的props属性

2021/11/02 Vue.js

【海涛教你打DOTA】死灵飞龙第一视角解说

2022/04/01 DOTA