jquery 模式对话框终极版实现代码


Posted in Javascript onSeptember 28, 2009

页面滚动时随着滚动条固定在屏幕的中央,模式对话框中的内容为两种,一是iframe引入,一是HTML语句插入。在网站开发中十分常用,使用该插件十分的简单。来看一下运行效果。
jquery 模式对话框终极版实现代码
插件使用
1、首先引入样式文件,详细代码如下所示:
<link href="images/blue/css.css" rel="stylesheet" type="text/css" id="showdialogcss" />
着里面的id一定不要忘记,他是用于切换插件皮肤的。
2、接着引入jQuery的js文件,具体代码如下:
<script src="js/jquery.js"></script>
3、最后引入模式对话框插件,具体代码如下:
<script src="js/dialog.js"></script>
4、编写用于点击的HTML代码,具体代码如下:
<div id="diagx">单击我--模式对话框</div>
5、编写JavaScript代码,为id为“diagx”的div绑定单击模式对话框,具体代码如下所示

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#diagx').ShowDialog({ 
Width:"500", //模式对话框宽度500px 
Height:"300", //模式对话框300px 
Title:"模式对话框", //模式对话框上的标题 
skin:"blue", //模式对话框皮肤样式 共有三种 1、blue;2、red;3、geen。 
FrameURL:"http://www.baidu.com/", //iframe连接地址 当ContentFlag等于0时才起作用 
ContentFlag:"0", //模式对话框显示iframe还是HTML内容标示 0是iframe;1是HTML内容 
Contents:"<div>测试数据</div>" //模式对话框中显示的HTML内容 
}); 
}); 
</script>

该插件的默认参数还有Intopacity表示模式对话背景(就是整个页面遮罩层)的透明度默认值为“0.2”。整个例子的全部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" /> 
<link href="images/blue/css.css" rel="stylesheet" type="text/css" id="showdialogcss" /> 
<script src="js/jquery.js"></script> 
<script src="js/dialog.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#diagx').ShowDialog({ 
Width:"500", 
Height:"300", 
Title:"模式对话框", 
skin:"blue", 
FrameURL:"http://www.baidu.com/", 
ContentFlag:"0", 
Contents:"<div>测试数据</div>" 
}); 
}); 
</script> 
<title>模式对话框</title> 
</head> 
<body> 
<div id="diagx">单击我--模式对话框</div> 
</body> 
</html>

该代码运行时,如果我们单击id为“diagx”的div层将弹出模式对话框。
插件的源代码可以在如下下载,欢迎大家下载使用,和改进,改进后不要忘记通知我一下,我也提高一下。谢谢。
打包下载地址
Javascript 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
div层的移动及性能优化
Nov 16 Javascript
jquery 笔记 事件
Nov 02 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 #Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 #Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 #Javascript
javascript parseInt 大改造
Sep 27 #Javascript
网页自动跳转代码收集
Sep 27 #Javascript
JavaScript中Object和Function的关系小结
Sep 26 #Javascript
js 覆盖和重载 函数
Sep 25 #Javascript
You might like
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
php上传文件常见问题总结
2015/02/03 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php服务器的系统详解
2019/10/12 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python查看微信撤回消息代码
2018/06/07 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python求解汉诺塔游戏
2020/07/09 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
保卫工作个人总结
2015/03/03 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
Python绘制散乱的点构成的图的方法
2022/04/21 Python
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers