实例：
前提 jquery.artDialog.js（兼容jquery）
<!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" />
<title>无标题文档</title>
<link id="artDialogSkin" href="css/default.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.artDialog.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.artDialog.source.js"></script>
</head>
<body>
<script type="text/javascript">
function i(){
var _this = document.getElementById('btn7');
if (document.getElementById('M_dfd')) {//如果已经打开了对话框，按这个按钮还能把它关闭
$.dialog({id:'yy'}).close();
_this.innerHTML = '弹出菜单'; //button上显示的内容
return;
};
$.dialog({id:'yy', lock: true, title:'菜单', content:'请输入：<input style="width:200px;" id="M_dfd" type="text" value="hello world!" />',
button:[{name:'确定',callback:function(){
var a=document.getElementById('M_dfd').value;
$.dialog({content:a, lock:true, time:1});
}
},
{name:'关闭我',callback:function(){_this.innerHTML = '弹出菜单';}}
]
}
);
_this.innerHTML = '关闭菜单';
return false;
};
</script>
<button id="btn7" onClick="i()">弹出菜单</button><br/>
</body>
</html>
artDialog提供了一个jQuery版本，功能与标准版一致，调用只需要把art前缀改成jQuery的命名空间。
// 普通调用
$.dialog({content:'hello world!'});
// 使用选择器方式，此时自动使用绑定了live click事件，同时启用follow模式
$('#main .test').dialog({content: 'hello world'}); (最低兼容jquery1.3.2，但框架应用插件需要jquery1.4+运行[?])
官网：
http://www.planeart.cn/demo/artDialog/
分享到：
相关推荐
《艺术对话框（artDialog）与jQuery弹层技术详解》 在网页开发中，弹层（对话框）是一种常见的交互设计元素，用于显示临时信息或进行用户交互。artDialog是一个强大的JavaScript对话框插件，它结合了jQuery的优势，...
- 初始化 jQuery 对象，然后调用 `.dialog()` 方法创建对话框实例。 - 设置对话框的参数，如宽高、位置、标题、内容等。 - 控制对话框的显示和关闭，如需加载外部内容，可以结合 `iframeTools` 使用。 6. **功能...
在压缩包中的"自己写的Demo"可能是为了展示如何使用artDialog4.1.7的实例。通过查看和分析这个Demo，开发者可以学习到如何配置对话框的参数、如何绑定事件处理函数，以及如何根据实际需求定制对话框的外观和行为。 ...
1. **artDialog插件**：artDialog是一个高性能的JavaScript对话框组件，它可以创建模态或非模态对话框，支持自定义样式和丰富的API接口，提供良好的可扩展性。它适用于各种应用场景，如消息提示、确认对话框、表单...
相比其他对话框组件，如jQuery UI的Dialog或Bootstrap的Modal，artDialog在轻量化和易用性上有一定优势，特别适合需要快速构建对话框功能的项目。然而，对于大型复杂项目，可能需要更多考虑组件的生态和社区支持，...
2. **独立性与兼容性**：虽然提供了与jQuery的整合版本(`jquery.artDialog.js`)，但`artDialog`本身是独立的，不依赖任何库，能良好运行在各种浏览器环境中，包括IE6+、Firefox、Chrome、Safari和Opera等。...
7. **多实例管理**: `artDialog` 支持同时打开多个对话框，并且提供了方便的方法来管理这些实例，如关闭特定的对话框或者获取当前活动的对话框。 8. **动画效果**: `artDialog` 提供了丰富的动画效果，如淡入淡出、...
《深入解析：jQuery弹出框插件artDialog4.1.6》 在网页开发中，弹出框是一种常见的交互元素，用于展示重要的信息、获取用户输入或进行一系列操作。artDialog是一个强大的jQuery插件，它以其优雅的样式、丰富的功能...
其次，`artDialog`支持丰富的配置选项和API，可以设置对话框的大小、位置、标题、内容、按钮、回调函数等。例如，你可以自定义对话框的宽度和高度，设置其是否可拖动，或者指定关闭对话框时的回调函数。这种灵活性...
3. 可能还有其他辅助文件，如`ie6.css`（用于解决IE6浏览器的兼容性问题）或`jquery.artDialog.js`（如果插件依赖jQuery库的话）。 **使用步骤**： 1. 引入文件：在HTML页面中引入`artDialog.css`和`artDialog.js`...
本文实例讲述了jQuery插件artDialog.js使用与关闭方法。分享给大家供大家参考，具体如下： 子窗口关闭artdialog终极解决方案： window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE ...
除了基本的对话框功能，artDialog还可以与其他库如jQuery、Bootstrap等结合使用，实现更复杂的功能，如： - **表单验证**：在对话框内嵌入表单，利用artDialog的事件机制进行实时验证。 - **图片预览**：创建一个...
7. **多实例管理**：ArtDialog可以同时创建多个独立的对话框实例，互不影响，方便处理多个并发的对话需求。 ### ArtDialog4.1.6 API详解 - `art.dialog(options)`：创建一个新的对话框，`options` 是一个包含各种...
考虑到描述中提到的“很多个单个示例”，在`artDialog-master`文件夹中应该包含了多个演示实例，每个实例都有对应的HTML和JavaScript代码，是学习和理解artDialog功能的绝佳资料。通过逐个研究这些示例，可以快速...
其核心特点在于体积小巧，压缩后的文件大小仅十几KB，无需依赖任何其他JavaScript框架，如jQuery等，这使得它在性能和兼容性上具有显著优势。artDialog的设计理念是提供一个简单易用、功能丰富的对话框解决方案，...
//定义一个变量用于控制artDialog的实例 //绑定点击事件，弹出artDialog显示表单内容 $("#addHname").click(function(){ alt = art.dialog({ title: '新增花名', //对话框标题 content: document....
在“前端常用插件之artDialog弹出框”这篇文章中，作者可能详细介绍了如何在项目中引入和使用ArtDialog，包括下载插件、引入依赖库（如jQuery）、配置选项以及实例化对话框。同时，文章也可能包含了一些常见问题的...
首先，文档中提到了需要引入jQuery库以及相关的插件，例如在此例中引入了艺术对话框（artDialog）插件，用于丰富交互体验。通过引入这些库，可以方便地使用jQuery提供的丰富API来操作页面元素。 接下来，文档提供了...
1.3、jQuery AJAX示例 二、延迟对象（Deferred） 2.1、回调函数 2.2、deferred.done 三、跨域 3.1、什么是跨域 3.2、JSONP跨域 3.3、jQuery使用JSONP跨域 3.4、跨域资源共享（CORS） 3.5、小结 四、弹出层 五、模板...