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 特殊字符串
Feb 25 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
AngularJS 事件发布机制
Aug 28 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
JS函数进阶之继承用法实例分析
Jan 15 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之数据库操作详解及乱码解决!
2007/01/02 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php返回json数据函数实例
2014/10/09 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
js word表格动态添加代码
2010/06/07 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python如何查看微信消息撤回
2018/11/27 Python
python获取本机所有IP地址的方法
2018/12/26 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
软件测试面试题
2014/01/05 面试题
vue项目实现分页效果
2021/03/24 Vue.js
英文自我鉴定
2013/12/10 职场文书
九年级语文教学反思
2014/02/04 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
会计实训总结范文
2015/08/03 职场文书
卖车协议书范文
2016/03/23 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL