效果：

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>ArtDialog</title>

    <script src="JavaScript/Quote/jquery-1.8.3.min.js"></script>

    <link href="ArtDialog/skins/simple.css" rel="stylesheet" />

    <script src="ArtDialog/jquery.artDialog.js"></script>

    <style type="text/css">

        .Btncss {

            float: right;

            margin-right: 20px;

            margin-top: 20px;

            color: #fff;

            background-color: #0094ff;

            border: none;

            width: 90px;

            height: 40px;

            cursor: pointer;

            font-size: 16px;

            font-family: '微软雅黑';

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $("#submit").click(function () {

                art.dialog({ id: 'TS', width: 325, height: 170, content: '请输入内容！' });

            })

        })

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <input class="Btncss" id="submit" type="button" value="发表" />

        </div>

    </form>

</body>

</html>

　　

详细使用文档：

在页面head引入artDialog，注意如果文件带有skin参数将会无阻塞的方式自动加载对应的皮肤css文件，当然你仍然可以使用传统方式引用“skins/”目录下的css文件，二者选其一。

<script src="artDialog.js?skin=default"></script>

如果项目采用jQuery作为框架，则引用jQuery artDialog版本：

<script src="jquery.artDialog.js?skin=default"></script>

如果需要在iframe应用下提供 更好的支持，需要加上：

<script src="artDialog.iframeTools.js"></script>

配置参数

名称 类型 默认值 描述

内容

title String '消息' 标题内容

content String null 消息内容。

1、如果内容类型是Object还需要tmpl参数配合

2、如果传入的是HTMLElement类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置

3、如果没有设定content的值则会有loading的动画

HTMLElement

Object

按钮

yesFn Function null 确定按钮回调函数。

函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮

Boolean

noFn Function null 取消按钮回调函数。

函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮

对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不同罢了，点击同样触发noFn事件

Boolean

yesText String '确定' "确定按钮"文字

noText String '取消' "取消按钮"文字

button Array null 自定义按钮。

配置参数成员：

name

 —— 按钮名称

callback —— 按下后执行的函数

focus

 —— 是否聚焦点

disabled —— 是否标记按钮为不可用状态（后续可使用控制接口让其恢复可用状态）

示例：

参数如：[{name:

 '登录', callback: function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false

尺寸

width Number 'auto' 设置消息内容宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容。

如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整

String

height Number 'auto' 设置消息内容高度，可以带单位。不建议设置此，而应该让内容自己撑开高度。

如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整

String

位置

fixed Boolean false 开启静止定位。静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响。（artDialog支持IE6

 fixed）

follow HTMLElement null 让对话框依附在指定元素附近。

可传入元素ID名称，注意ID名称需要以“#”号作为前缀

String

left Number '50%' X轴的坐标。

1、如果开启了fixed参数则以浏览器视口为基准；

2、可以使用'0%'

 ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整

String

top Number 'goldenRatio' Y轴的坐标。

1、如果开启了fixed参数则以浏览器视口为基准；

2、可以使用'0%'

 ~ '100%'、''goldenRatio''作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整，其中'goldenRatio'表示为黄金比例垂直居中，绝对居中请使用'50%'

String

视觉

lock Boolean false 开启锁屏。

中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它

background String '#000' 锁屏遮罩颜色

opacity Number 0.7 锁屏遮罩透明度

icon String null 定义消息图标。可定义“skins/icons/”目录下的图标名作为参数名（不包含后缀名）

padding String '20px

 25px' 内容与边界填充边距(即css

 padding)

交互

time Number null 设置对话框显示时间。以秒为单位

resize Boolean true 是否允许用户调节尺寸

drag Boolean true 是否允许用户拖动位置

esc Boolean true 是否允许用户按Esc键关闭对话框

高级

id String null 设定对话框唯一标识。用途：

1、防止重复弹出

2、可后续使用art.dialog.list[youID]获取控制接口

Number

tmpl String null 启用模板引擎拼接消息内容，还需要与content参数传入字面量对象才能生效，详情见示例

zIndex Number 1987 重置全局zIndex初始值。

用来改变对话框叠加高度。比如有时候配合外部浮动层UI组件，但是它们可能默认zIndex没有artDialog高，导致无法浮动到artDialog之上，这个时候你就可以给对话框指定一个较小的zIndex值。

请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。

initFn Function null 对话框弹出后执行的函数

closeFn Function null 对话框关闭前执行的函数。函数如果返回false将阻止对话框关闭。

请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，closeFn都将执行。

show Boolean true 是否显示对话框

配置全局默认设置:

(function (config) { config['lock'] = true; config['fixed'] = true; config['yesText'] = 'yes'; config['noText'] = 'no'; // [more..] })(art.dialog.defaults);

配置参数范例

内容 [content]

1. 传入字符串

art.dialog({ content: '我支持HTML' });

2. 传入HTMLElement

备注：1、元素不是复制而是完整移动到对话框中，所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框，会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置，style display属性也将恢复

art.dialog({ content: document.getElementById('demoCode_content_DOM'), id: 'EF893L' });

3. 高级应用：传入Object并使用“tmpl”模板参数生成内容

备注：拼接字符串是一个比较无趣的活儿，而artDialog内部使用一个微型模板引擎解析自身UI框架，你可以通过tmp参数继续使用它格式化内容。模板支持原生的javascript语法，可进行条件判断。推荐你尝试使用type="text/tmpl"的script标签存放模板，如：

var tmpl = document.getElementById('tmpl_demoCode_content').innerHTML; art.dialog({ content: { code: 0, users: ['糖饼', '月月鸟', '水水', '丽丽', '花花', '大叔'], me: '糖饼', web: 'http://www.planeart.cn' }, tmpl: tmpl });

标题 [title]

art.dialog({ title: 'hello world!' });

确定取消按钮 [yesFn & noFn]

备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭

art.dialog({ content: '如果定义了回调函数才会出现相应的按钮', yesFn: function () { this.title('3秒后自动关闭').time(3); return false; }, noText: '关闭', noFn: true //为true等价于function(){} });

自定义按钮 [button]

备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭；button参数对应的控制接口名称也是"button"

art.dialog({ id: 'testID', content: 'hello world!', button: [ { name: '同意', callback: function () {this.content('你同意了').time(2); return false; }, focus: true }, { name: '不同意', callback: function () {alert('你不同意') } }, { name: '无效按钮', disabled: true }, { name: '关闭我' } ] });

定时关闭的消息 [time]

art.dialog({ time: 2, content: '两秒后关闭' });

防止重复弹出 [id]

art.dialog({ id: 'testID', content: '再次点击运行看看' }); art.dialog({id: 'testID'}).title('3秒后关闭').time(3);

定义消息图标 [icon]

内置图标：alert、succeed、error、confirm

art.dialog({ icon: 'succeed', content: '我可以定义消息图标哦' });

内容与边界填充边距 [padding]

有时候并不需要默认的内容填充边距，如展示图片与视频

art.dialog({ padding: 0, title: false, content: '<img src="./images/photo.jpg" width="379" height="500" />', lock: true });

锁屏 [lock & background & opacity]

art.dialog({ lock: true, background: '#600', // 背景色 opacity: 0.7, // 透明度 content: '中断用户在对话框以外的交互，展示重要操作与消息', icon: 'error', yesFn: function () { art.dialog({content: '再来一个锁屏', lock:true}); return false; }, noFn: true });

跟随元素 [follw]

1、标准形式

art.dialog({ follow: document.getElementById('followTestBtn'), content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框' });

2、使用简写形式 （已经绑定onclick事件，注意此返回值不再是对话框控制接口）

art('#demoCode_follow_a').dialog({ content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框' });

元素触发

自定义坐标 [left & top]

art.dialog({ left: 100, top: '60%', content: '我改变坐标了' });

创建一个右下角浮动的消息窗口

art.dialog({ id: 'msg', title: '公告', content: 'hello world!', width: 320, height: 240, left: '100%', top:'100%', fixed: true, drag: false, resize: false })

设置大小 [width & height]

art.dialog({ width: '20em', height: 55, content: '尺寸可以带单位' });

创建一个全屏对话框

art.dialog({ width: '100%', height: '100%', left: '0%', top: '0%', fixed: true, resize: false, drag: false })

静止定位 [fixed]

art.dialog({ fixed: true, content: '请拖动滚动条查看' });

不许拖拽 [drag & resize]

art.dialog({ drag: false, resize: false, content: '禁止拖拽' });

控制接口

名称 描述

close() 关闭对话框

show() 显示对话框

hide() 隐藏对话框

title(value) 写入标题。无参数则返回标题容器元素

content(value) 向消息容器中写入内容。参数支持字符串、DOM对象，无参数则返回内容容器元素

button(arguments) 插入一个自定义按钮。

如：button({name:

 '登录', callback: function () {_form.submit();}) 更多用法请见范例文档

follow(element) 让对话框吸附到指定元素附近

position(left,

 top) 重新定位对话框

size(width,

 height) 重新设定对话框大小

lock() 锁屏

unlock() 解锁

time(val) 定时关闭（单位秒）

备注：控制接口返回值都是this，因此你可以使用链式编程风格。

控制接口范例

控制接口可以在对话框初始化后控制对话框，需要有一定的javascript基础，这里不做过多演示。

获取控制接口：直接引用控制接口

var dialog = art.dialog({ title: '我是对话框', content: '我是初始化的内容' }); dialog.content('对话框内容被控制接口改变了').title('提示');

获取控制接口：使用对话框ID

art.dialog({ id: 'KDf435', title: '警告', content: '我是初始化的内容' }); art.dialog.list['KDf435'].content('对话框内容被控制接口改变了').time(2);

获取控制接口：this引用

art.dialog({ title: '警告', content: '我是初始化的内容', yesFn: function () { this.content('你点了确定按钮').position('50%', null).lock().time(2); return false; }, initFn: function () { this.content('对话框内容被控制接口改变了'); } });

演示四

关闭页面所有对话框

var list = art.dialog.list; for (var i in list) { list[i].close(); };

按钮接口演示

备注：回调函数如果返回false将阻止对话框关闭

var dialog = art.dialog({ title: '警告', content: '点击管理按钮将让删除按钮可用', width: '20em', button: [{ name: '管理', callback: function () { this.content('我更改了删除按钮').button({ name: '删除', disabled:false }); return false; }, focus: true }] }); dialog.button( { name: '删除', callback: function () {alert('remove') }, disabled: true } )

改变关闭方式

art.dialog({ id: 'show-hide', content: '关闭后阻止对话框被删除，只隐藏对话框', closeFn: function () {this.hide(); return false; } }).show();

AJAX高级应用：执行HTML片段中特殊script标签

HTML片段中的<script type="text/dialog"></script>标签包裹的javascript将会在对话框中执行，其this指向对话框控制接口，代码在闭包内执行，不会影响全局，这样可以进一步实现内容模块化。

(本例子使用了AJAX，需要在服务器上运行。可打开 ./ajaxContent/login.html查看源码中的自定义脚本)

var dialog = art.dialog({id: 'N3690'}); // jQuery ajax $.ajax({ url: './ajaxContent/login.html', success:function (data) { dialog.content(data); }, cache: false });

扩展：iframe应用工具集

名称 描述

核心方法

art.dialog.parent 获取artDialog可用最高层window对象。这与直接使用window.top不同，它能排除artDialog对象不存在已经或者顶层页面为框架集的情况

这是iframe应用工具集中的核心方法，你可以用它来操作父页面对象（包括上面的对话框）

art.dialog.data(name,

 value) 跨框架数据共享写入接口。

框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是噩梦。

而data方法就是为了解决这个问题，你完全不用管框架层级问题，它可以写入任何类型的数据，而做到各个页面之间数据共享。

art.dialog.data(name) 跨框架数据共享读取接口。指定name即返回数据，任何引用了artDialog的页面都有效

art.dialog.removeData(name) 跨框架数据共享删除接口。删除指定名称的数据，任何引用了artDialog的页面都有效

异步数据对话框

art.dialog.open(url,

 options, cache) 创建一个iframe页面

参数:

 地址, 配置参数, 缓存开关(默认true)

art.dialog.open.api iframe页面获取open方法控制接口。

(注意这个iframe中也必须引用artDialog脚本文件)

art.dialog.open.origin iframe页面获取open方法触发来源页面window对象。

(注意这个iframe中也必须引用artDialog脚本文件)

art.dialog.close() iframe页面关闭open方法创建的对话框的快捷方式。

close方法等同于：

var

 api = art.dialog.open.api;

api && api.close();

(注意这个iframe中也必须引用artDialog脚本文件)

art.dialog.load(url,

 options, cache) Ajax加载内容

参数：地址,

 配置参数, 缓存开关(默认true)

基础交互对话框

art.dialog.alert(content) 警告消息

 (同时只允许一个alert)

参数: 内容

art.dialog.confirm(content,

 yesFn, noFn) 确认

 (同时只允许一个confirm)

参数: 内容, 确定按钮回调函数, 取消按钮回调函数

art.dialog.prompt(content,

 yesFn, value) 提问

 (同时只允许一个prompt)

参数: 内容, 确定按钮回调函数, 文本框默认值

art.dialog.tips(content,

 time) 短暂提示(同时只允许一个tips)

参数:

 内容、显示时间(单位秒, 默认1.5)

自定义

art.dialog.through(options) 创建一个普通可穿越框架的对话框

不鼓励直接使用window.top这样的方式穿越，这样可能因为对话框触发页面重置导致其产生所有的对象在内存中被清空，而让对话框无法关闭，所以你应该用这个安全的方法创建自定义对话框。

框架集页面无法覆盖第三方元素，不过可以使用一个iframe套住框架集页面就可以正常使用，见下面演示文档

　　

插件 - 提示窗体（ArtDialog）的更多相关文章

  1. WordPress安装插件提示输入FTP账户信息

    在WP后台安装插件时提示输入FTP账户信息,其实出现这个的问题的原因是Apache/Nginx的执行身份非文件属主身份. 如果你使用的是独立服务器或VPS,WordPress的安装目录为 /home/ ...

  2. C#中弹出文件选择窗体和判断是否下载提示窗体的源码

    1.创建一个window窗体

  3. XCode中在提示窗体中对已弃用的API接口画上红线

    当我们在XCode中写程序时会不断的出现相关API提示窗体,那敲起来是一个爽啊. 有时候会看到一些API已经弃用了被画上红色的横线.说明该接口已经被弃用,仍保留,但不建议使用,对弃用API实现画横线事 ...

  4. MyEclipse弹出提示窗体

    MyEclipse弹出提示窗体 1.弹窗例如以下

  5. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...

  6. Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...

  7. 解决Openwrt安装插件提示一下错误的办法

    解决Openwrt安装插件提示一下错误的办法 Openwrt安装17ce插件,提示一下错误: Collected errors: * check_data_file_clashes: Package ...

  8. 关闭是否只查看安全传送的网页内容提示框 和 是否允许运行软件，如ActiveX控件和插件提示框

    关闭是否只查看安全传送的网页内容提示框 最新编写 爬虫程序,运行程序后,电脑就总是出现下面这个提示框,一遍遍点"是"或"否"繁琐又麻烦.我看得有点不耐烦了.于是 ...

  9. Eclipse Indigo 3.7.0 安装GIT插件提示 requires 'bundle org.eclipse.team.core(转)

    文章参考来源:http://showlike.iteye.com/blog/1958538 错误提示: Cannot complete the install because one or more ...

随机推荐

  1. docker学习笔记11：Dockerfile 指令 CMD介绍

    我们知道,通过docker run 创建并启动一个容器时,命令的最后可以指定容器启动后在容器内立即要执行的指令,如: docker run -i -t ubunu /bin/bash   //表示容器 ...

  2. 飞翔（LIS变形）

    飞翔 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 鹰最骄傲的就是翱翔,但是鹰们互相都很嫉妒别的鹰比自己飞的快,更嫉妒其他的鹰比自己飞行的有技巧.于是,他们决定举办一场 ...

  3. 利用JNI技术在Android中调用C++形式的OpenGL ES 2.0函数

    1.                 打开Eclipse,File-->New-->Project…-->Android-->AndroidApplication Projec ...

  4. 开源软件实践之linux高性能服务器编程框架和选型

    很多人学习编程技术一般都通过一本编程语言的入门书籍,然后尝试做一些例子和小项目.但是这些都不能让我们深入的学习很多的编程技巧和高深技术,当然这个时候很多有经验的学习人员就会告诉大家,找一个好的开源软件 ...

  5. android 图片尺寸 资料

  6. C# - 委托_求定积分通用方法

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  7. []: secureCRT连接ubuntu问题- The remote system refused the connection

    secureCRT连接ubuntu问题- The remote system refused the connection http://jxyang.iteye.com/blog/1484915 解 ...

  8. 关于Get和Post

    get和post 简介: Get和post是表单提交数据的两种基本方式,get请求数据通过域名后缀url传送,用户可见,不安全,post请求数据通过在请求报文正文里传输,相对比较安全. get是通过u ...

  9. <转载>Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  10. Mac 实用工具

    命令行常用工具: Iterm2 也是一个终端命令行工具,支持多工作区,使用清爽 http://www.iterm2.com/documentation.html 给你的命令行 代码上色 Solariz ...