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 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
在PHP中使用redis
2013/11/04 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
JS实现div居中示例
2014/04/17 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python生成带有表格的图片实例
2019/02/03 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
函数指针的定义是什么
2016/08/14 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
关于学习的决心书
2015/02/05 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
家庭贫困证明
2015/06/16 职场文书