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获取web应用根目录的方法
Feb 12 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
javascript数组排序汇总
2015/07/07 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
Python匹配中文的正则表达式
2016/05/11 Python
儿童python练习实例
2018/05/27 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python使用配置文件过程详解
2019/12/28 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python绘制分布折线图的示例
2020/09/24 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
毕业生就业自荐信
2013/12/04 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
医院合作协议书
2014/08/19 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
2016年十一促销广告语
2016/01/28 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python