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

用showModalDialog弹出页面后，提交表单总是弹出一个新窗口

Jul 18 Javascript

JavaScript 动态添加表格行使用模板、标记

Oct 24 Javascript

JavaScript 轻松搞定快捷留言功能只需一行代码

Apr 01 Javascript

js前台分页显示后端JAVA数据响应

Mar 18 Javascript

offsetHeight在OnLoad中获取为0的现象

Jul 22 Javascript

jQuery实现渐变下拉菜单的简单方法

Mar 11 Javascript

jQuery获取字符串中出现最多的数

Feb 22 Javascript

使用RequireJS库加载JavaScript模块的实例教程

Jun 06 Javascript

js判断空对象的实例(超简单)

Jul 26 Javascript

利用jsonp跨域调用百度js实现搜索框智能提示

Aug 24 Javascript

Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案

Sep 15 Javascript

js cavans实现静态滚动弹幕

May 21 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变量内存分配问题记录整理

2013/11/27 PHP

PHP中使用CURL获取页面title例子

2015/01/07 PHP

PHP框架Laravel插件Pagination实现自定义分页

2020/04/22 PHP

js中方法重载如何实现？以及函数的参数问题

2013/08/01 Javascript

js实现大转盘抽奖游戏实例

2015/06/24 Javascript

jquery实现的动态回到顶部特效代码

2015/10/28 Javascript

jQuery实现拖拽页面元素并将其保存到cookie的方法

2016/06/12 Javascript

jQuery 3.0中存在问题及解决办法

2016/07/15 Javascript

关于JavaScript中事件绑定的方法总结

2016/10/26 Javascript

使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）

2017/01/21 Javascript

AngularJS $http模块POST请求实现

2017/04/08 Javascript

vue动态生成dom并且自动绑定事件

2017/04/19 Javascript

jquery网页加载进度条的实现

2017/06/01 jQuery

简单谈谈原生js的math对象

2017/06/27 Javascript

require.js中的define函数详解

2017/07/10 Javascript

基于bootstrap页面渲染的问题解决方法

2018/08/09 Javascript

vue+webpack 更换主题N种方案优劣分析

2019/10/28 Javascript

Vue SPA 首屏优化方案

2021/02/26 Vue.js

浅谈python内置变量-reversed(seq)

2017/06/21 Python

利用python操作SQLite数据库及文件操作详解

2017/09/22 Python

Python 3.6 读取并操作文件内容的实例

2018/04/23 Python

python实现从文件中读取数据并绘制成 x y 轴图形的方法

2018/10/14 Python

一篇文章搞懂Python的类与对象名称空间

2018/12/10 Python

pandas把所有大于0的数设置为1的方法

2019/01/26 Python

美国领先的宠物用品和宠物食品零售商：Petco

2020/10/28 全球购物

求职简历自荐信

2013/10/20 职场文书

营销与策划应届生求职信

2013/11/04 职场文书

财务人员的自我评价范文

2014/03/03 职场文书

党的群众路线教育实践活动学习笔记

2014/11/05 职场文书

2014年秘书工作总结

2014/11/25 职场文书

干部年终考核评语

2015/01/04 职场文书

诚信考试承诺书范文

2015/04/29 职场文书

工作态度不好检讨书

2015/05/06 职场文书

污水处理保证书

2015/05/09 职场文书

2015年度合同管理工作总结

2015/05/22 职场文书

诺贝尔奖获得者名言100句：句句启人心智，值永久收藏

2019/08/09 职场文书