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

159 阅读 0 评论 105 点赞

我是靠谱客的博主机灵曲奇，最近开发中收集的这篇文章主要介绍jquery 模式对话框终极版实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

页面滚动时随着滚动条固定在屏幕的中央，模式对话框中的内容为两种，一是iframe引入，一是HTML语句插入。在网站开发中十分常用，使用该插件十分的简单。来看一下运行效果。

插件使用
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> 