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

JSON 入门指南想了解json的朋友可以看下

Aug 26 Javascript

js中将字符串转换成json的三种方式

Jan 12 Javascript

javascript中定义私有方法说明(private method)

Jan 27 Javascript

js实现模拟计算器退格键删除文字效果的方法

May 07 Javascript

JS生成不重复的随机数组的简单实例

Jul 10 Javascript

Vue.js一个文件对应一个组件实践

Oct 27 Javascript

jQuery基于xml格式数据实现模糊查询及分页功能的方法

Dec 25 Javascript

jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)

May 20 jQuery

vue修改对象的属性值后页面不重新渲染的实例

Aug 09 Javascript

VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

Apr 03 Javascript

easyUI使用分页过滤器对数据进行分页操作实例分析

Jun 01 Javascript

详解Node.js如何处理ES6模块

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

js onload事件不起作用示例分析

2013/10/09 Javascript

js比较日期大小的方法

2015/05/12 Javascript

将List对象列表转换成JSON格式的类实现方法

2016/07/04 Javascript

AngularJs 指令详解及示例代码

2016/09/01 Javascript

常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数

2016/09/23 Javascript

Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置

2019/05/10 Javascript

扫微信小程序码实现网站登陆实现解析

2019/08/20 Javascript

详解elementui之el-image-viewer(图片查看器)

2019/08/30 Javascript

vue实现文件上传读取及下载功能

2020/11/17 Javascript

基于JavaScript实现单例模式

2019/10/30 Javascript

vue实现鼠标移过出现下拉二级菜单功能

2019/12/12 Javascript

vue 数据操作相关总结

2020/12/17 Vue.js

Python中几个比较常见的名词解释

2015/07/04 Python

深入解析Python编程中JSON模块的使用

2015/10/15 Python

python 调用win32pai 操作cmd的方法

2017/05/28 Python

Python编写登陆接口的方法

2017/07/10 Python

python实现简单神经网络算法

2018/03/10 Python

pandas的object对象转时间对象的方法

2018/04/11 Python

用python简单实现mysql数据同步到ElasticSearch的教程

2018/05/30 Python

mac安装pytorch及系统的numpy更新方法

2018/07/26 Python

Python实现计算字符串中出现次数最多的字符示例

2019/01/21 Python

Pytorch Tensor 输出为txt和mat格式方式

2020/01/03 Python

Python range与enumerate函数区别解析

2020/02/28 Python

男女时尚与复古风格在线购物：RoseGal（全球免费送货）

2017/07/19 全球购物

澳大利亚冒险体验：Adrenaline（跳伞、V8赛车、热气球等）

2017/09/18 全球购物

Beach Bunny Swimwear官网：设计师泳装和性感比基尼

2019/03/13 全球购物

怎样写好自我鉴定

2013/12/04 职场文书

探矿工程师自荐信

2014/01/24 职场文书

应聘护理专业毕业自荐书范文

2014/02/12 职场文书

2014年五四青年节演讲比赛方案

2014/04/22 职场文书

员工家属慰问信

2015/03/24 职场文书

幼儿园庆元旦主持词

2015/07/06 职场文书

运动会5000米加油稿

2015/07/21 职场文书

SQLServer2008提示评估期已过解决方案

2021/04/12 SQL Server

Python利用folium实现地图可视化

2021/05/23 Python

关于Python中进度条的六个实用技巧分享

2022/04/05 Python