编程 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的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