前段js的各种弹出框

artDialog

首页 > 文档与示例


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

  1. 支持普通与 12 方向气泡状对话框
  2. 完善的焦点处理，自动焦点附加与回退
  3. 支持 ARIA 标准
  4. 面向未来：基于 HTML5 Dialog 的 API
  5. 支持标准与模态对话框
  6. 丰富且友好的编程接口
  7. 能自适应内容尺寸
  8. 仅 4kb (gzip)

文档导航

引入 artDialog

1.直接引用

<script src="lib/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="css/ui-dialog.css">
<script src="dist/dialog-min.js"></script>

2.作为 RequireJS 或 SeaJS 的模块引入

var dialog = require(‘./src/dialog‘);

注意：内部依赖全局模块require(‘jquery‘)，请注意全局模块配置是否正确。seajs加载示例

  • 如果需要支持 iframe 内容与拖拽，请引用加强版 dialog-plus.js
  • jquery 最低要求版本为1.7+

快速参考

普通对话框

var d = dialog({
    title: ‘欢迎‘,
    content: ‘欢迎使用 artDialog 对话框组件！‘
});
d.show();

运行

模态对话框

var d = dialog({
    title: ‘message‘,
    content: ‘<input autofocus />‘
});
d.showModal();

运行

气泡浮层

var d = dialog({
    content: ‘Hello World!‘,
    quickClose: true// 点击空白处快速关闭
});
d.show(document.getElementById(‘quickref-bubble‘));

运行

12 个方向定位演示

添加按钮

1.确定与取消按钮：

var d = dialog({
    title: ‘提示‘,
    content: ‘按钮回调函数返回 false 则不许关闭‘,
    okValue: ‘确定‘,
    ok: function () {
        this.title(‘提交中…‘);
        return false;
    },
    cancelValue: ‘取消‘,
    cancel: function () {}
});
d.show();

运行

2.指定更多按钮：

请参考 button 方法或参数。

控制对话框关闭

var d = dialog({
    content: ‘对话框将在两秒内关闭‘
});
d.show();
setTimeout(function () {
    d.close().remove();
}, 2000);

运行

给对话框左下脚添加复选框

var d = dialog({
    title: ‘欢迎‘,
    content: ‘欢迎使用 artDialog 对话框组件！‘,
    ok: function () {},
    statusbar: ‘<label><input type="checkbox">不再提醒</label>‘
});
d.show();

运行

阻止对话框关闭

按钮事件返回 false 则不会触发关闭。

var d = dialog({
    title: ‘欢迎‘,
    content: ‘欢迎使用 artDialog 对话框组件！‘,
    ok: function () {
        var that = this;
        this.title(‘正在提交..‘);
        setTimeout(function () {
            that.close().remove();
        }, 2000);
        return false;
    },
    cancel: function () {
        alert(‘不许关闭‘);
        return false;
    }
});
d.show();

运行

不显示关闭按钮

var d = dialog({
    title: ‘欢迎‘,
    content: ‘欢迎使用 artDialog 对话框组件！‘,
    cancel: false,
    ok: function () {}
});
d.show();

运行

创建 iframe 内容

artDialog 提供了一个增强版用来支持复杂的 iframe 套嵌的页面，可以在顶层页面创建一个可供 iframe 访问的对话框创建方法，例如：

seajs.use([‘dialog/src/dialog-plus‘], function (dialog) {
    window.dialog = dialog;
});

然后子页面就可以通过top.dialog控制对话框了。

打开示例页面

小提示：增强版的选项比标准版多了url、oniframeload这几个字段。

方法

若无特别说明，方法均支持链式调用。

show([anchor])

显示对话框。

默认居中显示，支持传入元素节点或者事件对象。

  • 参数类型为HTMLElement：可吸附到元素上，同时对话框将呈现气泡样式。
  • 参数类型为Event Object：根据event.pageX与event.pageY定位。

示例

var d = dialog();
d.content(‘hello world‘);
d.show(document.getElementById(‘api-show‘));

运行
var d = dialog({
    id: ‘api-show-dialog‘,
    quickClose: true,
    content: ‘右键菜单‘
});
$(document).on(‘contextmenu‘, function (event) {
    d.show(event);
    return d.destroyed;
});

运行

showModal([anchor])

显示一个模态对话框。

其余特性与参数可参见show([anchor])方法。

示例

var d = dialog({
    title: ‘message‘,
    content: ‘<input autofocus />‘
});
d.showModal();

运行

close([result])

关闭（隐藏）对话框。

可接收一个返回值，可以参见 returnValue。

注意：close()方法只隐藏对话框，不会在 DOM 中删除，删除请使用remove()方法。

remove()

销毁对话框。

注意：不同于close([result])方法，remove()方法会从 DOM 中移出对话框相关节点，销毁后的对话框无法再次使用。

对话框按钮点击后默认会依次触发 close()、remove() 方法。如果想手动控制对话框关闭可以如下操作：

var d = dialog();
// [..]
d.close().remove();

运行

content(html)

写入对话框内容。

html参数支持String、HTMLElement类型。

示例

传入字符串：

var d = dialog();
d.content(‘hello world‘);
d.show();

运行

传入元素节点：

var elem = document.getElementById(‘test‘);
dialog({
    content: elem,
    id: ‘EF893L‘
}).show();

title(text)

写入对话框标题。

示例

var d = dialog();
d.title(‘hello world‘);
d.show();

运行

width(value)

设置对话框宽度。

示例

dialog({
    content: ‘hello world‘
})
.width(320)
.show();

运行

height(value)

设置对话框高度。

示例

dialog({
    content: ‘hello world‘
})
.height(320)
.show();

运行

reset()

手动刷新对话框位置。

通常动态改变了内容尺寸后需要刷新对话框位置。

button(args)

自定义按钮。

参数请参考 选项button；同时支持传入 HTML 字符串填充按钮区域。

focus()

聚焦对话框（置顶）。

blur()

让对话框失去焦点。

addEventListener(type, callback)

添加事件。

支持的事件有：show、close、beforeremove、remove、reset、focus、blur

removeEventListener(type, callback)

删除事件。

dialog.get(id)

根据获取打开的对话框实例。

注意：这是一个静态方法。

dialog.getCurrent()

获取当前（置顶）对话框实例。

注意：这是一个静态方法。

配置参数

content

设置消息内容。

类型

String, HTMLElement

示例

传入字符串：

dialog({
    content: ‘hello world!‘
}).show();

运行

传入元素节点：

var elem = document.getElementById(‘test‘);
dialog({
    content: elem,
    id: ‘EF893L‘
}).show();

title

标题内容。

类型

String

示例

dialog({
    title: ‘hello world!‘
}).show();

运行

statusbar

状态栏区域 HTML 代码。

可以实现类似“不再提示”的复选框。注意：必须有按钮才会显示。

类型

String

示例

var d = dialog({
    title: ‘欢迎‘,
    content: ‘欢迎使用 artDialog 对话框组件！‘,
    ok: function () {},
    statusbar: ‘<label><input type="checkbox">不再提醒</label>‘
});
d.show();

运行

ok

确定按钮。

回调函数this指向dialog对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭。

类型

Function

示例

dialog({
    ok: function () {
        this
        .title(‘消息‘)
        .content(‘hello world!‘)
        .width(130);
        return false;
    }
}).show();

运行

okValue

(默认值: "ok") 确定按钮文本。

类型

String

示例

dialog({
    okValue: ‘猛击我‘,
    ok: function () {
        this.content(‘hello world!‘);
        return false;
    }
}).show();

运行

cancel

取消按钮。

取消按钮也等同于标题栏的关闭按钮，若值为false则不显示关闭按钮。回调函数this指向dialog对象，执行完毕默认关闭对话框，若返回false则阻止关闭。

类型

Function, Boolean

示例

dialog({
    title: ‘消息‘,
    ok: function () {},
    cancel: function () {
        alert(‘取消‘);
    }
}).show();

运行
dialog({
    title: ‘消息‘,
    content: ‘不显示关闭按钮‘,
    ok: function () {},
    cancel: false
}).show();

运行

cancelValue

(默认值: "cancel") 取消按钮文本。

类型

String

示例

dialog({
    cancelValue: ‘取消我‘,
    cancel: function () {
        alert(‘关闭‘);
    }
}).show();

运行

cancelDisplay

(默认值: true) 是否显示取消按钮。

类型

Boolean

示例

dialog({
    title: ‘提示‘,
    content: ‘这是一个禁止关闭的对话框，并且没有取消按钮‘,
    cancel: function () {
        alert(‘禁止关闭‘);
        return false;
    },
    cancelDisplay: false
}).show();

运行

button

自定义按钮组。

类型

Array

选项

名称 类型 描述
value String 按钮显示文本
callback Function (可选) 回调函数this指向dialog对象，执行完毕默认关闭与销毁对话框（依次执行close()与remove()），若返回false则阻止关闭与销毁
autofocus Boolean (默认值:false) 是否自动聚焦
disabled Boolean (默认值: false) 是否禁用

示例

dialog({
    button: [
        {
            value: ‘同意‘,
            callback: function () {
                this
                .content(‘你同意了‘);
                return false;
            },
            autofocus: true
        },
        {
            value: ‘不同意‘,
            callback: function () {
                alert(‘你不同意‘)
            }
        },
        {
            id: ‘button-disabled‘,
            value: ‘无效按钮‘,
            disabled: true
        },
        {
            value: ‘关闭我‘
        }
    ]
}).show();

运行

width

设置对话框 内容 宽度。

类型

String, Number

示例

dialog({
    width: 460
}).show();

运行
dialog({
    width: ‘20em‘
}).show();

运行

height

设置对话框 内容 高度。

类型

String, Number

示例

dialog({
    height: 460
}).show();

运行
dialog({
    height: ‘20em‘
}).show();

运行

skin

设置对话框额外的className参数。

多个className请使用空格隔开。

类型

String

示例

dialog({
    skin: ‘min-dialog tips‘
}).show();

padding

(默认值: 继承 css 文件设置) 设置消息内容与消息容器的填充边距，即 style padding属性

类型

String

示例

dialog({
    content: ‘hello world‘,
    padding: 0
}).show();

运行

fixed

(默认值: false) 开启固定定位。

固定定位是 css2.1 position的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与部分移动浏览器对其支持不好，内部会转成绝对定位。

类型

Boolean

示例

dialog({
    fixed: true,
    title: ‘消息‘,
    content: ‘请拖动滚动条查看‘
}).show();

运行

align

(默认值: "bottom left") 设置对话框与其他元素的对齐方式。

如果show(elem)与showModal(elem)传入元素，align参数方可生效，支持如下对齐方式：

  • "top left"
  • "top"
  • "top right"
  • "right top"
  • "right"
  • "right bottom"
  • "bottom right"
  • "bottom"
  • "bottom left"
  • "left bottom"
  • "left"
  • "left top"

类型

String

示例

var d = dialog({
    align: ‘left‘,
    content: ‘Hello World!‘,
    quickClose: true
});
d.show(document.getElementById(‘option-align‘));

运行

12 个方向定位演示

autofocus

(默认值: true) 是否支持自动聚焦。

类型

Boolean

quickClose

(默认值: false) 是否点击空白出快速关闭。

类型

Boolean

示例

var d = dialog({
    content: ‘点击空白处快速关闭‘,
    quickClose: true
});
d.show(document.getElementById(‘option-quickClose‘));

运行

zIndex

(默认值: 1024) 重置全局zIndex初始值，用来改变对话框叠加高度。

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

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

类型

Number

示例

dialog({
    zIndex: 87
}).show();

运行

onshow

对话框打开的事件。

回调函数this指向dialog对象。

类型

Function

示例

var d = dialog({
    content: ‘loading..‘,
    onshow: function () {
        this.content(‘dialog ready‘);
    }
});
d.show();

运行

onclose

对话框关闭后执行的事件。

回调函数this指向dialog对象。

类型

Function

示例

var d = dialog({
    onclose: function () {
        alert(‘对话框已经关闭‘);
    },
    ok: function () {}
});
d.show();

运行

onbeforeremove

对话框销毁之前事件。

回调函数this指向dialog对象。

类型

Function

onremove

对话框销毁事件。

回调函数this指向dialog对象。

类型

Function

示例

var d = dialog({
    onclose: function () {
        alert(‘对话框已经关闭‘);
    },
    onremove: function () {
        alert(‘对话框已经销毁‘);
    },
    ok: function () {}
});
d.show();

运行

onfocus

对话框获取焦点事件。

回调函数this指向dialog对象。

类型

Function

onblur

对话框失去焦点事件。

回调函数this指向dialog对象。

类型

Function

onreset

对话框位置重置事件。

回调函数this指向dialog对象。

类型

Function

id

设定对话框唯一标识。

  1. 可防止重复 ID 对话框弹出。
  2. 支持使用dialog.get(id)获取某个对话框的接口。

类型

String

示例

dialog({
    id: ‘id-demo‘,
    content: ‘再次点击运行看看‘
}).show();
dialog.get(‘id-demo‘).title(‘8888888888‘);

运行

属性

open

判断对话框是否被打开。

returnValue

对话框返回值。

示例

var d = dialog({
    title: ‘消息‘,
    content: ‘<input id="property-returnValue-demo" value="1" />‘,
    ok: function () {
        var value = $(‘#property-returnValue-demo‘).val();
        this.close(value);
        this.remove();
    }
});
d.addEventListener(‘close‘, function () {
    alert(this.returnValue);
});
d.show();

运行

其他

自定义样式

打开配置文件： src/dialog-config.js，其中cssUir字段是 css 文件的路径，innerHTML字段则是 artDialog 的模板。修改这两个字段即可很方便的设计属于自己的皮肤。

一套皮肤可以添加不同的className实现多种状态，可参考 skin 选项。

源码构建

使用GruntJS在 artDialog 源码根目录执行即可。

artDialog v5 升级 v6 参考

https://github.com/aui/artDialog/wiki/artDialog-v5%E5%8D%87%E7%BA%A7v6%E5%8F%82%E8%80%83

支持

artDialog 是基于 LGPL 协议免费开源的程序，问题反馈可在 Github issues 上进行（为了保证效率，请务必描述清楚你的问题，例如包含 artDialog 版本号、浏览器版本等必要信息，有 demo 甚佳。不合格问题将可能会被关闭）。


如果你喜欢 artDialog，请捐赠一杯咖啡的费用以支持 artDialog。如果您认为 LGPL 开源协议满足不了您的项目，亦可购买商业授权。

TOP

时间： 2024-10-09 21:56:44

前段js的各种弹出框的相关文章

原生Js封装的弹出框

<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>原生Js封装的弹出框-弹出窗口-页面居中-多状态可选</title> <style type="text/css"&

Bootstrap的js插件之弹出框(popover)

data-toggle="popover"--使弹出框能够切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placement--设置弹出框的方位(top.left.right.bottom,默认为right): data-trigger="focus"--设置焦点事件使用户点击空白处即能切换状态: 更多细节参考示例: <!DOCTYPE html> <html lang="zh_

selenium python （十一）alert/confirm/prompt的处理（js中的弹出框）

webdriver中处理js所生成的alert.confirm以及prompt,采用switch_to_alert()方法定位到alert/confirm/prompt.然后使用text/accept/dismiss/send_keys进行操作 ①text:返回alert/confirm/prompt中的文字信息 ②accept:点击确认按钮 ③dismiss:点击取消按钮 ④send_keys:输入值,这个alert/confirm/prompt没有对话框就不能使用,否则会报错 eg:百度的设

js遮罩层弹出框

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了一定指出呀 <style> #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;} #H-dialog .close{float:right;font-size: 30px;margi

JS中confirm弹出框

1 if(confirm("确定要删除该任务吗?")){ 2 $.post("findTaskById.action",{taskId:taskId},function(data){ 3 if(data.status=='I' || data.status=='V'){ 4 window.location.href = "deleteTask.action?id=" + taskId; 5 } else { 6 alert("抱歉,该任

js本身实现的弹出框

一:js现有的弹出框 1.alert(message) message为要在弹出框内显示的纯文本: <html> <script> function show_alert() { alert('hello'); } </script> <body> <tr><td><input type=button id=btn1 name=btn1 value=alert onclick=show_alert();></td&g

js 常见弹出框学习

模拟系统的弹出框 系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹出   http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/,网站提供打包好的资源下载. html中的基本结构: <div class="md-modal md-effect-1" id="mo

Bootstrap入门（二十九）JS插件6：弹出框

加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入CSS文件和JS文件 <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script&

使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】

项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jQuery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js. jsonp快速入门: [原创]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 关于jquery.ajax的jsonp方法是用以及其error回调函数不能正确执行,请参考园长dudu的文章: jquery ajax中使用jsonp的限制 jQuery插件jQu