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

兼容性

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

授权协议

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

支持开源

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

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

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

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>ArtDialog V6</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

	<link rel="stylesheet" type="text/css" href="artDialog/css/ui-dialog.css">

	<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>

	<script type="text/javascript" src="artDialog/js/dialog-min.js"></script>

	<script type="text/javascript">

		function test1(){

			var d = dialog({

				title:'欢迎',

	   			content:'欢迎使用 artDialog v6对话框组件。'

			});

			d.show();

		}

		function test2(){

			var d = dialog({

				title:'欢迎',

	   			content:'欢迎使用 artDialog v6对话框组件！

'

			});

			d.showModal();

		}

		function test3(obj){

			var d = dialog({

				content: 'Hello World!',

   				quickClose: true// 点击空白处高速关闭

			});

			d.show(obj);

		}

		function test4(){

			var d = dialog({

			    title: '欢迎',

			    content: '欢迎使用 artDialog 对话框组件！

',

			    ok: function () {},

			    statusbar: '<label><input type="checkbox">不再提醒</label>'

			});

			d.show();

		}

		function test5(){

			dialog({

			    button:[{

			    	value: '允许',

		            callback: function () {

		                this

		                .content('你允许了');

		                return false;

		            },

		            autofocus: true

			    },{

		            value: '不允许',

		            callback: function () {

		                alert('你不允许')

		            }

		        },{

		            id: 'button-disabled',

		            value: '无效按钮',

		            disabled: true

		        },{

		            value: '关闭我'

		        }]

			}).show();

		}

	</script>

  </head>

  <body>

    <input type="button" value="普通对话框" onclick="javascript:test1();">

    <input type="button" value="模态对话框" onclick="javascript:test2();">

    <input type="button" value="气泡浮层" onclick="javascript:test3(this);">

    <input type="button" value="statusbar" onclick="javascript:test4();">

    <input type="button" value="自己定义按钮组" onclick="javascript:test5();">

  </body>

</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. zabbix 3.2 高可用实现方式二-pacemaker+corosync实现zabbix高可用集群

    一.pacemaker 是什么 1.pacemaker 简单说明 2.pacemaker 由来 二.pacemaker 特点 三.pacemaker 内部结构 1.群集组件说明: 2.功能概述 四.c ...

  2. Kotlin实现LeetCode算法题之Two Sum

    LeetCode介绍 LeetCode是算法练习.交流等多功能网站,感兴趣的同学可以关注下(老司机请超车).页面顶部的Problems菜单对应算法题库,附带历史通过滤.难易程度等信息. 未来计划 打算 ...

  3. 谈一次java web系统的重构思路

    ——略谈Java web软件如何提供二次开发接口 接手公司的一个Java web软件产品,该软件采用传统的dwr框架.dwr框架相当于一个中间层,使得javascript能够识别Java类对象,进而能 ...

  4. SpringMVC知识一锅烩

    Spring简介 SpringMVC和Struts2一样都是属于表现层的框架,将前段发出的请求分发给对应的后端处理器即Controller 处理流程 用户请求被前端控制前拦截,然后根据对应的拦截路径去 ...

  5. 多线程+socket实现多人聊天室

    最近在学习多线程的时候打算做一个简单的多线程socke聊天的程序,结果发现网上的代码都没有完整的实现功能,所以自己实现了一个demo: demo功能大致就是,有一个服务端负责信息转发,多个客户端发送消 ...

  6. linux C/C++开发环境搭建指南

    一.安装基本开发环境 1.配置GCC 刚装好的系统中已经有GCC了,但是这个GCC什么文件都不能编译,因为没有一些必须的头文件,所以要安装build-essential这个软件包,安装了这个包会自动安 ...

  7. node使用buffer生成图片

    buffer是node里的一个模块,这个模块的出现是因为js没有阅读和操作二进制数据流而出现的 buffer是什么及作用? Buffer顾名思义叫缓冲区,用于存储速度不同步的设备或优先级不同的设备之间 ...

  8. 记PHP面向对象编程

    访问控制 public(公开的):可以在类中.子类中.类外访问. protected(受保护的):只能在类本身及子类中访问. private(私有的):只能在声明他们的类中进行访问,私有的类成员不能被 ...

  9. centos6.9(Linux系统)安装VMware tools教程

    VMware tools是虚拟机上虚拟硬件的驱动,可以实现鼠标的无缝移出移入,剪贴板共享,共享文件夹等功能.很多的Linux系统初学者,在安装centos6.9系统时,没有安装VMware tools ...

  10. websocket做手机页面聊天与PC页面聊天一对一的即时通讯

    当时要写这个需求的时候,很头痛,手机端页面的客服功能,相当于QQ这样一个一对一聊天室功能了,瞬间蒙蔽的我也不知道用什么去写这个东西,一开始用ajax,定时器去写,写着写着发现这尼玛不在同一个页面怎么做 ...