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

自适应图片大小的弹出窗口

Jul 27 Javascript

javascript Firefox与IE 替换节点的方法

Feb 24 Javascript

js列举css中所有图标的实现代码

Jul 04 Javascript

JavaScript执行顺序详细介绍

Dec 04 Javascript

jquery实现select选中行、列合计示例

Apr 25 Javascript

jQuery支持动态参数将函数绑定到事件上的方法

Mar 17 Javascript

IE浏览器下PNG相关功能

Jul 05 Javascript

原生js实现jquery函数animate()动画效果的简单实例

Aug 21 Javascript

JS实现的图片选择顺序切换和循环切换功能示例【测试可用】

Dec 28 Javascript

基于elementUI实现图片预览组件的示例代码

Mar 31 Javascript

jQuery实现日历效果

Sep 11 jQuery

WebStorm中如何将自己的代码上传到github示例详解

Oct 28 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后台程序与Javascript的两种交互方式

2009/10/25 PHP

php intval函数用法总结

2019/04/14 PHP

PHP防止sql注入小技巧之sql预处理原理与实现方法分析

2019/12/13 PHP

JavaScript 高级篇之闭包、模拟类,继承（五）

2012/04/07 Javascript

js弹出框轻量级插件jquery.boxy使用介绍

2013/01/15 Javascript

用js设置下拉框为只读的小技巧

2014/04/10 Javascript

深入探究使JavaScript动画流畅的一些方法

2015/06/30 Javascript

JS定义类的六种方式详解

2016/05/12 Javascript

angularjs 源码解析之scope

2016/08/22 Javascript

微信小程序定义全局数据、函数复用、模版等详细介绍

2016/10/27 Javascript

React/Redux应用使用Async/Await的方法

2017/11/16 Javascript

vue路由组件按需加载的几种方法小结

2018/07/12 Javascript

vue2使用keep-alive缓存多层列表页的方法

2018/09/21 Javascript

element-ui多文件上传的实现示例

2019/04/10 Javascript

Vue代码整洁之去重方法整理

2019/08/06 Javascript

Python中struct模块对字节流/二进制流的操作教程

2017/01/21 Python

Python编程django实现同一个ip十分钟内只能注册一次

2017/11/03 Python

基于anaconda下强大的conda命令介绍

2018/06/11 Python

啥是佩奇?使用Python自动绘画小猪佩奇的代码实例

2019/02/20 Python

python字符串循环左移

2019/03/08 Python

Python 50行爬虫抓取并处理图灵书目过程详解

2019/09/20 Python

使用NumPy读取MNIST数据的实现代码示例

2019/11/20 Python

python上selenium的弹框操作实现

2020/07/13 Python

理解Django 中Call Stack机制的小Demo

2020/09/01 Python

在pycharm中使用pipenv创建虚拟环境和安装django的详细教程

2020/11/30 Python

Agoda台湾官网：国内外订房2折起

2018/03/20 全球购物

美国折扣香水网站：The Perfume Spot

2020/12/12 全球购物

XML文档面试题

2015/08/05 面试题

资产评估专业大学生求职信

2013/09/29 职场文书

函授自我鉴定

2013/11/06 职场文书

教育学专业毕业生的自我评价

2013/11/21 职场文书

写自荐信的注意事项

2014/03/09 职场文书

公安局班子个人对照检查材料思想汇报

2014/10/09 职场文书

2014年法制宣传日活动方案

2014/11/02 职场文书

通用员工手册范本

2015/05/14 职场文书

python3+PyQt5+Qt Designer实现界面可视化

2021/06/10 Python