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

来源：互联网发布：dnf帐号数据出现异常编辑：程序博客网时间：2024/05/17 03:22

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

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

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

使用实例一

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

一，包含文件部分

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

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

<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery("#button").click(function(){
jQuery.fn.jmodal({
title: '必优博客',
content: '技术源于实践，实践必然优秀!',
buttonText: '确定',
okEvent: function(e) {
alert('点击确定后触发的事件！');
}
});
});
});
//-->
</script>

三，HTML部分

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

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

使用实例二

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

一，包含文件部分

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

二，HTML部分

<button id="button">测试中</button>
<div id="dialogs" style="display:none;">
<div id="dialog">
<p>这是一个对话框</p>
<p>这是一个对话框</p>
<p>这是一个对话框</p>
<p>这是一个对话框</p>
</div>
</div>

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

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

<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery("#button").click(function(){
jQuery.fn.jmodal({
title: '必优博客',
content:jQuery("#dialogs").html(),
buttonText: '确定',
okEvent: function(e) {
alert('点击确定后触发的事件！');
}
});
});
});
//-->
</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插件弹出对话框使用简单，是一个非常优秀的插件，值得推荐。