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

刷新页面实现方式总结(HTML,ASP,JS)

Nov 13 Javascript

jQuery find和children方法使用

Jan 31 Javascript

jquery map方法使用示例

Apr 23 Javascript

Js的Array数组对象详解

Feb 22 Javascript

js获取iframe中的window对象的实现方法

May 20 Javascript

详解Vue项目编译后部署在非网站根目录的解决方案

Apr 26 Javascript

区别JavaScript函数声明与变量声明

Sep 12 Javascript

使用vue2.0创建的项目的步骤方法

Sep 25 Javascript

使用JS location实现搜索框历史记录功能

Dec 23 Javascript

JavaScript设计模式--简单工厂模式定义与应用案例详解

May 23 Javascript

nuxt引入组件和公共样式的操作

Nov 05 Javascript

JavaScript实现登录窗体

Jun 22 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

Smarty结合Ajax实现无刷新留言本实例

2007/01/02 PHP

基于命令行执行带参数的php脚本并取得参数的方法

2016/01/25 PHP

Symfony2框架创建项目与模板设置实例详解

2016/03/17 PHP

php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)

2016/05/12 PHP

PHP实现防盗链的方法分析

2017/07/25 PHP

php让json_encode不自动转义斜杠“/”的方法

2020/04/27 PHP

基于jquery循环map功能的代码

2011/02/26 Javascript

JavaScript高级程序设计阅读笔记（十四） js继承机制的实现

2012/08/14 Javascript

jQuery判断元素是否存在的可靠方法

2014/05/06 Javascript

jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)

2016/08/29 Javascript

JavaScript实现页面无操作倒计时退出

2016/10/22 Javascript

Vue 仿QQ左滑删除组件功能

2018/03/12 Javascript

解决Vue中mounted钩子函数获取节点高度出错问题

2018/05/18 Javascript

解决vue中使用proxy配置不同端口和ip接口问题

2019/08/14 Javascript

微信小程序实现轨迹回放的示例代码

2019/12/13 Javascript

node.js express捕获全局异常的三种方法实例分析

2019/12/27 Javascript

JavaScript canvas仿代码流瀑布

2020/02/10 Javascript

JS script脚本中async和defer区别详解

2020/06/24 Javascript

python中安装模块包版本冲突问题的解决

2017/05/02 Python

Python实现带参数与不带参数的多重继承示例

2018/01/30 Python

为什么选择python编程语言入门黑客攻防给你几个理由!

2018/02/02 Python

python 限制函数执行时间,自己实现timeout的实例

2019/01/12 Python

Win10里python3创建虚拟环境的步骤

2020/01/31 Python

TensorFlow梯度求解tf.gradients实例

2020/02/04 Python

Booking.com荷兰：全球酒店网上预订

2017/08/22 全球购物

Asics日本官网：鬼冢八喜郎创立的跑鞋运动品牌

2017/10/18 全球购物

什么是重载？CTS、CLS和CLR分别做何解释

2012/05/06 面试题

高校教师思想汇报

2014/01/11 职场文书

捐助倡议书范文

2014/04/15 职场文书

优秀教师感人事迹材料

2014/05/04 职场文书

2015年医德考评自我评价

2015/03/03 职场文书

反腐倡廉心得体会2016

2016/01/13 职场文书

《生物入侵者》教学反思

2016/02/16 职场文书

开网店计划分析

2019/07/30 职场文书

创业计划书之蛋糕店

2019/08/29 职场文书

MySQL创建管理RANGE分区

2022/04/13 MySQL