artDialog v6 —— 经典的网页对话框组件，内外皆用心雕琢。

兼容性

測试通过：IE6~IE11、Chrome、Firefox、Safari、Opera

授权协议

免费，且开源。基于LGPL协议。

支持开源

贡献代码 ||
捐赠一杯咖啡 ||
商业授权

artDialog，献给那些愿意为 web 极致体验付出的人们！

四年来。有超过 40 万站点在使用 artDialog，当中不乏国内顶尖的产品：

在artDialog的使用中，使用较多版本号为4.1.7和6了，曾经我都是使用4.1.7版本号，所以来研究了一下v6版本号的使用。直接上代码：

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>ArtDialog V6</title>
  13. 	<meta http-equiv="pragma" content="no-cache">
  14. 	<meta http-equiv="cache-control" content="no-cache">
  15. 	<meta http-equiv="expires" content="0">
  16. 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  17. 	<meta http-equiv="description" content="This is my page">
  18. 	<!--
  19. 	<link rel="stylesheet" type="text/css" href="styles.css">
  20. 	-->
  21.  
  22. 	<link rel="stylesheet" type="text/css" href="artDialog/css/ui-dialog.css">
  23.  
  24. 	<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
  25. 	<script type="text/javascript" src="artDialog/js/dialog-min.js"></script>
  26.  
  27. 	<script type="text/javascript">
  28. 		function test1(){
  29. 			var d = dialog({
  30. 				title:'欢迎',
  31. 	   			content:'欢迎使用 artDialog v6对话框组件。'
  32. 			});
  33. 			d.show();
  34. 		}
  35.  
  36. 		function test2(){
  37. 			var d = dialog({
  38. 				title:'欢迎',
  39. 	   			content:'欢迎使用 artDialog v6对话框组件！
  40.  
  41. '
  42. 			});
  43. 			d.showModal();
  44. 		}
  45.  
  46. 		function test3(obj){
  47. 			var d = dialog({
  48. 				content: 'Hello World!',
  49.    				quickClose: true// 点击空白处高速关闭
  50. 			});
  51. 			d.show(obj);
  52. 		}
  53.  
  54. 		function test4(){
  55. 			var d = dialog({
  56. 			    title: '欢迎',
  57. 			    content: '欢迎使用 artDialog 对话框组件！
  58.  
  59. ',
  60. 			    ok: function () {},
  61. 			    statusbar: '<label><input type="checkbox">不再提醒</label>'
  62. 			});
  63. 			d.show();
  64. 		}
  65.  
  66. 		function test5(){
  67. 			dialog({
  68. 			    button:[{
  69. 			    	value: '允许',
  70. 		            callback: function () {
  71. 		                this
  72. 		                .content('你允许了');
  73. 		                return false;
  74. 		            },
  75. 		            autofocus: true
  76. 			    },{
  77. 		            value: '不允许',
  78. 		            callback: function () {
  79. 		                alert('你不允许')
  80. 		            }
  81. 		        },{
  82. 		            id: 'button-disabled',
  83. 		            value: '无效按钮',
  84. 		            disabled: true
  85. 		        },{
  86. 		            value: '关闭我'
  87. 		        }]
  88. 			}).show();
  89. 		}
  90. 	</script>
  91.   </head>
  92.  
  93.   <body>
  94.     <input type="button" value="普通对话框" onclick="javascript:test1();">
  95.     <input type="button" value="模态对话框" onclick="javascript:test2();">
  96.     <input type="button" value="气泡浮层" onclick="javascript:test3(this);">
  97.     <input type="button" value="statusbar" onclick="javascript:test4();">
  98.     <input type="button" value="自己定义按钮组" onclick="javascript:test5();">
  99.   </body>
  100. </html>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHVvMjAxMjI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHVvMjAxMjI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

有不懂，想要其它效果的能够去看看API，一切就都能够轻松搞定了

ArtDialog V6的简单使用的更多相关文章

  1. 网站对话框开源脚本--ArtDialog V6.0

    初识对话框脚本觉得artDialog还是挺不错的开源的js脚本,最新版本都是V6.0 ,相对之前版本,artDialog的语法也发生很大的变化,windows对应的JS版本如下 点击下载 语法也发生变 ...

  2. artDialog ( v 6.0.2 ) content 参数引入页面 html 内容

    /*! artDialog v6.0.2 | https://github.com/aui/artDialog */ 将页面某一隐藏的 div 的 html 内容传到 artdialog 的弹窗中,并 ...

  3. IP V4 和 IP V6 初识

    IP V4    是互联网协议的第四版 地址长度为32位,4字节,用十进制表示 格式为:A.B.C.D 最大的问题在于网络地址资源有限,严重制约了互联网的应用和发展 IP V6    是互联网协议的I ...

  4. ArtDialog简单使用示例

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  5. 让网站全面支持v4/v6 HTTP、HTTPS、HTTP/2最简单方法是增加Nginx反向代理服务器

    bg6cq/nginx-install: nginx install script https://github.com/bg6cq/nginx-install [原创]step-by-step in ...

  6. artDialog 简单使用！

    简介 artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验. 功能: 支持锁定屏幕(遮罩).模拟alert和confirm.多窗口弹出.静止 ...

  7. artDialog 简单几种用法

    $('#btn1').click(function(){        artDialog({title:'图片查看', content:'<img width="817" ...

  8. FineUI（开源版）v6.0中FState服务器端验证的实现原理

    前言 1. FineUI(开源版)是完整开源,最早发起于 2008-04,下载全部源代码:http://fineui.codeplex.com/ 2. 你可以通过捐赠作者来支持FineUI(开源版)的 ...

  9. AppBox v6.0中实现子页面和父页面的复杂交互

    前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...

随机推荐

  1. mac中利用brew实现多版本php共存以及任意切换

    1.安装brew 参考链接:https://brew.sh/index_zh-cn.html 2.安装php56 brew install homebrew/php/php56 3.配置php56 因 ...

  2. 百度地图Marker优化方案

    简介 在使用百度地图的时候,我们需要在地图上增加标注Marker来展示设置信息.随着用户需要不断增多,加载更多的Marker标注信息成为了一种奢望.然而通过自己技术的提升,归结出来了一下方案. 引入百 ...

  3. 使用.net core在Ubuntu构建一个TCP服务器

    介绍和背景 TCP编程是网络编程领域最有趣的部分之一.在Ubuntu环境中,我喜欢使用.NET Core进行TCP编程,并使用本机Ubuntu脚本与TCP服务器进行通信.以前,我在.NET框架本身写了 ...

  4. java变量与内存深入了解

    ========================================================================================= 在我看来,学习jav ...

  5. Mac_Homebrew

    Homebrew作为OS X上强大的包管理器,为系统软件提供了非常方便的安装方式,独特式的解决了包的依赖问题,并不再需要烦人的sudo,一键式编译,无参数困扰,真的,你值得拥有. brew 的安装:  ...

  6. 【转】用PowerDesigner制作数据库升级脚本

    [原创]用PowerDesigner制作数据库升级脚本   很多人使用PD的时候就问有没有制作自动升级脚本的功能.其实是有的. 操作原理: 1.保存原来的版本,另存为apm的文件,生成一个Archiv ...

  7. DNS:域名系统

    概述: DNS的作用在于将域名转换为对应的IP地址. DNS名字空间和UNIX文件系统相似,也是树形结构.以"."结尾的域名称为FQDN(Full Qualified Domain ...

  8. kafka原理和实践（一）原理：10分钟入门

    系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...

  9. 2733:判断闰年-poj

    2733:判断闰年 总时间限制:  1000ms 内存限制:  65536kB 描述 判断某年是否是闰年. 输入 输入只有一行,包含一个整数a(0 < a < 3000) 输出 一行,如果 ...

  10. php代码中的细节问题

    本次主要谈及工作中关于注销功能中的路径设置及session的清除问题之前的调试一直忽略了session的功能,以至于每次使用__ROOT__/index.php/home/Student/logout ...