jQuery插件jmodal模拟对话框实现javascript弹出对话框功能

 原文地址： http://www.biuuu.com/p865.html

 

使用jQuery插件jmodal可以模拟弹出对话框功能，用户可自定义对话框的标题，内容，确定按钮以及样式等，弹出框内容可以为文本或HTML，通过二个实例，谈谈如何使用jmodal插件。

 

使用说明
需要使用jQuery库文件和jmodal库文件

使用实例一

直接使用javascript生成弹出框内容，如标题，内容，按钮和确定事件，效果图如上

一，包含文件部分

1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
2. <script type="text/javascript" src="jquery.jmodal.1.0.js"></script>

二，Javascript部分(调用jmodal模拟对话框工具)

1. <script type="text/javascript">
2. <!--
3. jQuery(document).ready(function(){
4. jQuery("#button").click(function(){
5. jQuery.fn.jmodal({
6. title: '必优博客',
7. content: '技术源于实践，实践必然优秀!',
8. buttonText: '确定',
9. okEvent: function(e) {
10. alert('点击确定后触发的事件！');
11. }
12. });
13. });
14. });
15. //-->
16. </script>

三，HTML部分

1. <button id="button">测试</button>

当点击测试按钮后弹出一个标题为“必优博客”，内容为“技术源于实践，实践必然优秀!”对话框。

使用实例二

对话框内容是自定义的HTML元素，在页面层将HTML隐藏，当弹出对话框后显示HTML内容。

 

一，包含文件部分

1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
2. <script type="text/javascript" src="jquery.jmodal.1.0.js"></script>

二，HTML部分

1. <button id="button">测试中</button>
2. <div id="dialogs" style="display:none;">
3. <div id="dialog">
4. <p>这是一个对话框</p>
5. <p>这是一个对话框</p>
6. <p>这是一个对话框</p>
7. <p>这是一个对话框</p>
8. </div>
9. </div>

使用style="display:none;"隐藏HTML内容

三，Javascript部分(调用jmodal模拟对话框工具)

1. <script type="text/javascript">
2. <!--
3. jQuery(document).ready(function(){
4. jQuery("#button").click(function(){
5. jQuery.fn.jmodal({
6. title: '必优博客',
7. content:jQuery("#dialogs").html(),
8. buttonText: '确定',
9. okEvent: function(e) {
10. alert('点击确定后触发的事件！');
11. }
12. });
13. });
14. });
15. //-->
16. </script>

实例二与实例一区别在于内容不同，前者是文本而后者是HTML，其使用方法一样。

jmodal插件弹出对话框参数如下：
data(Object): 传给对话框的数据
buttonText(String): 按钮名称
okEvent(Function): 确定按钮事件
initWidth(Interger): 初始化对话框宽度
title(String): 对话框标题
content(String): 对话框内容(文本或对话框)
overlayCss(Object): 覆盖网页的CSS样式
jmodalbgCss(Object): 对话框背景色CSS
jmodalCss(Object): 对话框CSS样式
closeCss(Object): 对话框关闭CSS样式
titleCss(Object): 对话框标题CSS样式
contentCss(Object):对话框内容CSS样式
bottomCss(Object): 对话框底部CSS样式
buttonCss(Object): 对话框确定按钮CSS样式

jmodal插件弹出对话框使用简单，是一个非常优秀的插件，值得推荐。