用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的js分页代码
Jun 10 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python自定义线程池实现方法分析
2018/02/07 Python
浅谈python之新式类
2018/08/12 Python
pycharm安装和首次使用教程
2018/08/27 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
DBA的职责都有哪些
2012/05/16 面试题
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
高中语文课后反思
2014/04/27 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
Vue2.0搭建脚手架
2022/03/13 Vue.js
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python