利用jquery制作出网页对话框的效果
不知道博园的朋友们有没有发现一个现象，很多的网站是不是跳出一个alert()的对话框，但是从界面的友好性方面考虑，这样是非常不友好的。暑假中我曾经看过一段微软的MSDN发布的视屏，视屏的作者是依明志，他在视频中曾提到，尽量不要用alert()来跳出对话框，理由很简单，我们来做个测试就知道为什么了。
首先你要一个支持多页面的浏览器，我这里举例子用的浏览器是遨游，其实现在的win7 系统中自带的IE8、IE9都是符合这个实验的要求的，当然不是以IE为内核的浏览器，像火狐、谷歌也是可以的。所以你随便选个上面的浏览器。
我们新建一个页面就放一个button按钮，然后点击这个按钮触发alert事件，此时的页面效果如图：
代码：
1 <html>2 <head>3 <title>alert()练习</title>4 <script type="text/javascript">5 function alertFun(){6 alert("1");7 }8 </script>9 </head>10 11 <body>12 <input type="button" value="点击我" οnclick="alertFun();" />13 </body>14 </html>
紧接着我们不要按确定键，此时我们继续打开第二个页面，点击遨游的加号，你发现了上面。我们开不了了，这就是对界面的友好性是非常不好的。
视屏就像小说一样，一笑而过了，但是我并没有放弃思想，放弃实践，虽然依明志提到了这个不友好型，也告诉了我们解决办法。但是却没有让我如何编写代码。然而我却自己整理资料，自己试着写代码，调试。最后成功了。这里报着分享的态度和园友们一起成长。
这里用到的技术是jquery、css和html语法。如果你没有学习过这3中语言，我个人建议先自学一下在看本文。不然可能你会看起来会很吃力。
需要的“装备“：jquery、jqueryUI的包。这里我用的jquery的版本是1.3.2
首先我们在html放上需要触发事件的对话框，和弹出的对话框。
代码如下：
1 <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">2 <span class="ui-icon ui-icon-newwin"></span>普通对话框3 </a>4 </p>5 6 <div id="dialog" titile="删除确认">7 <p>8 <span class="ui-icon ui-alert" ></span>9 删除后将无法还原！你确认要删除该信息吗？10 </p> 11 </div>12 13 <div id="dialog_Ok" title="成功">14 <p>15 <span class="ui-icon ui-icon-info" ; margin:0 7px 50px 0;"></span>16 删除成功！17 </p>18 </div>
写好html的代码的效果图如下：
接着我们在这里对其进行相应的css布局。因为我这里主要写的是jquery的文章，所以这里css不在这里做详细的介绍了。
最后是的效果图如下：
好了，前面的准备工作都做好了。现在我们要开始我们这篇博客的主题了。
首先我们按照常理在index.html页面中引入jquery的版本文件，然后在引入jquery UI的版本文件。代码如下：
1 <script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>2 <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
接着为了页面的整洁，我们自己新建一个js文件，命名为MyDialogJquery.js文件，来存放我们自己写的js代码。当然这里一定要注意，我们在引用文件的时候一定要把这个文件放在上面两个引用文件的后面。举个例子，我们先调用变量，然后在声明变量，这样当然不可以了，会报错！所以前面的两个引用文件的目的，你可以理解为在声明一个jquery的变量，为以后我们可以用jquery语法做好铺垫，而后面的js文件在前面jquery建立的基础上创建一个代码公开的UI操作。最后我们引用自己的js文件然后写出自己的效果，这其中需要调用jquery和UI文件中的函数（这里为了理解园友们可以这么理解）。
我们把MyDialogJquery.js文件也引进来。
代码：
1 <script type="text/javascript" src="js/MyDialogJquery.js"></script>
现在我们开始写jquery代码了。
一开始我们按照jquery语法。
$(function(){});这里用的是简写的方式，当然如果你喜欢全写，也是无所谓的。我本人比较懒就选择了简写的方式了。
接着我们开始对这3个对话框设置。
这里需要了解.dialog()函数的意思：这里我给出官方的网址，大家如果不明白可以参考看看官的解释
http://jqueryui.net/dialog/
这里重点介绍一下删除对话框，因为其他对话框基本是一样的：
代码如下：
1 //删除确认对话框2 $("#dialog").dialog({3 autoOpen:false, //设置默认的对框框为关闭4 bgiframe:true, //是否使用 bgiframe 插件解决 IE6 下无法遮盖 select 元素问题。5 modal:true, //是否为模态窗口，设置为 true 时，页面上其它元素将被覆盖且无法响应用户操作。6 width:400, //设定对话框宽度，像素单位。7 buttons:{ //设置对话框底部按钮，对象属性名为按钮文本，属性值为单击按钮时的回调函数。8 "确认":function(){9 $(this).dialog("close"); //关闭这个对话框10 $("#dialog_Ok").dialog("open");//打开确认的对话框11 },12 "取消":function(){ 13 $(this).dialog("close"); //关闭这个对话框14 }15 }16 });
首先我们利用$("#dialog")来找到我们需要操作的对话框，然后调用jquery为我们封装的dialog()的函数，因为是删除确认对话框，所有我们一开始设置的时候，应该设置这个对话框藏起来，第二个参数bgiframe用来解决IE6下面下无法遮盖 select 元素问题。modal这个属性，是用来设置当我们弹出对话框的时候，别的元素不可用，在我的包里我放了一个button按钮用来测试这个效果的，你可以试试；width设置对话框的宽度；最后我们需要在这个对话框中话两个按钮，一个确定，一个取消，并设置相应的操作。
最后实现的效果如图：
不知道你会不会了？
下载地址
转载于:https://www.cnblogs.com/Jimmy009/archive/2012/02/28/2372672.html
利用jquery制作出网页对话框的效果相关推荐
- 利用jQuery制作简易弹幕效果
利用jQuery制作简易弹幕效果 实现步骤: 1.制作样式 2.逻辑,思路 实现步骤: 1.制作样式 我们先来看看body中的代码: <body><div class="b ...
- ae破碎效果在哪_利用Ae制作出破碎效果的详细步骤
伙伴们知道在其中如何制作出破碎效果呢?不太了解的可以去下文看看利用Ae制作出破碎效果的详细步骤. 首先,打开我们的软件,AE,小编用的是CS6版本的,不过即使版本不同,其中的操作也都是大同小异哦. 打 ...
- 利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
- 利用jQuery制作简易手风琴
利用jQuery制作简易手风琴 实现步骤 1.引入jQuery文件 2.将写好的标签进行样式修改 3.逻辑代码的书写 我们先来看看效果: 实现步骤 1.引入jQuery文件 <script sr ...
- ae制作小球轨迹运动_利用Ae制作出自由落地运动小球的详细步骤
各位知道在Ae中如何制作出自由落地运动小球呢?不太会操作的用户可以去下文学习下利用Ae制作出自由落地运动小球的详细步骤. 我们先准备好小球图片素材,背景颜色为黑色.导入素材,新建合成.将素材拖拽的合成 ...
- 竖直菜单 html,jQuery实现的网页竖向菜单效果代码
本文实例讲述了jQuery实现的网页竖向菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的 ...
- jQuery 制作交通信号灯红绿灯动画效果
jQuery 制作交通信号灯红绿灯动画效果 HTML <p>好好学习 天天向上</p><div class="light"><div cl ...
- 利用FluidMoveBehavior制作出手机通讯录平滑的效果
最近学习Blend,原来Blend制作动画等效果非常棒.下面演示一下FluidMoveBehavior应用,利用Blend中行为中的FluidMoveBehavior制作出手机通讯录平滑的效果 1.在 ...
- 如何自制圆环_怎么利用photoshop制作出任意数量的彩色圆环
在海报制作,大图制作的过程中,多彩圆环的制作是会被经常应用到的,今天就通过下面这则制作7彩圆环,来一块学习如何制作才能制作出眼前一亮的多彩圆环效果. 备注:能制作出6彩,就能按此方法制作出任意数量的彩 ...
- 利用ps制作流线高光线条发光效果
v好了下面我们就来开始一点点看制作教程吧. 最终效果2 1.创建一个新文档,大小为1920 x 1200,之后设置渐变色: 2.使用钢笔工具绘制如下图形,钢笔工具的使用方法大家可以在网页教学网的Pho ...
最新文章
- iphone屏幕录制没声音_苹果屏幕录制没有声音？快检查这个功能是否打开
- 汇编语言--单步中断
- java编写简单计算器_编写java程序简单计算器
- html5简单动画效果代码,分享12个简洁漂亮的纯CSS3进度条特效动画代码
- 10款精选的用于构建良好易用性网站的jQuery插件
- linux下mqm添加用户,Linux 下MQ的安装和配置亲测
- 毕业设计html旅游网站,毕业设计--旅游网站的设计与实现(论文)
- pandas计算相关系数
- Pandas学习——文本数据
- vue.js环境+腾讯防水墙+实现弹窗滑动模块验证登录
- java cryptography_Java密码体系结构简介：Java Cryptography Architecture (JCA) Reference Guide...
- js判断数字，如果出现全角数字，将其转换为半角
- 热门算法总结 —— DPCA
- 笔记-15 网络编程入门 UDP通信程序 TCP通信程序 练习
- WCF技术剖析之十四：泛型数据契约和集合数据契约（上篇）
- LeetCode 2423. Remove Letter To Equalize Frequency【哈希表】简单
- [N1BOOK PARTofPWN] ROP本地
- 人民币升值与升值预期收益股票
- 世界上第一台个人电脑是哪台？
- 玩cf出现outofmemory_穿越火线出现out,穿越火线outofmemory