今天终于有时间把我以前写的一个jQuery插件进行整理，改进。这是一个模拟“模式对话框”的插件，该模式对话框共有三种皮肤，红、绿、蓝。页面滚动时随着滚动条固定在屏幕的中央，模式对话框中的内容为两种，一是iframe引入，一是HTML语句插入。在网站开发中十分常用，使用该插件十分的简单。来看一下运行效果。

　　图1红色界面

　　图2绿色界面

　　图3蓝色界面

　　插件使用

　　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>
　　　　　　该插件的默认

.
分页: [1] [2]

• 上一篇:jQuery页面渐显效果的实现
• 下一篇:在jquery代码中调用页面的服务器方法

TAG: jquery 对话框