The various pop-up boxes of the front section JS

Artdialog

Home > Documentation and examples

artdialog--Classic Web Page dialog box components, both inside and outside are carefully carved.

1. Supports normal and 12-directional Bubbles dialog box
2. Perfect focus handling, automatic focus attach and fallback
3. Support ARIA Standard
4. Future-oriented: API based on HTML5 Dialog
5. Support for standard and modal dialog boxes
6. Rich and user-friendly programming interface
7. Self-adapting content size
8. Only 4KB (gzip)

Document Navigation

• Introduction of Artdialog
• Quick reference
  • Normal dialog box
  • modal dialog box
  • Bubble floating Layer
  • Add button
  • Control dialog box Close
  • Add a check box to the bottom left of the dialog box
  • Block dialog box from closing
  • Do not show Close button
  • Create IFRAME Content
• method
  • Show ([anchor])
  • ShowModal ([anchor])
  • close ([result])
  • Remove ()
  • content (HTML)
  • title (text)
  • width (value)
  • height (value)
  • reset ()
  • Butto N (args)
  • focus ()
  • blur ()
  • AddEventListener (Type, callback)
  • RemoveEventListener (ty PE, callback)
  • dialog.get (ID)
  • dialog.getcurrent ()
• Options
  • Content
    • Title
    • Content
    • StatusBar
  • Button
    • Ok
    • Okvalue
    • Cancel
    • Cancelvalue
    • CancelDisplay
    • button
  • Appearance
    • Width
    • Height
    • Skin
    • Padding
  • Interaction
    • Fixed
    • Align
    • Quickclose
    • Autofocus
    • ZIndex
  • Event
    • OnShow
    • Onbeforeremove
    • OnRemove
    • OnClose
    • onfocus
    • Onblur
    • OnReset
  • Senior
    • Id
• Property
  • Open
  • ReturnValue
• Other
  • Custom styles
  • Source Code Construction
  • Artdialog V5 upgrade V6 Reference
  • Support

introduction of Artdialog1. Direct reference

<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. Introduced as a Requirejs or SEAJS module

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

Note: Depending on the global module internally require(‘jquery‘) , be aware that the global module is configured correctly. Seajs Loading Example

• If you need to support IFRAME content and drag, please refer to the enhanced version Dialog-plus.js
• jquery Minimum required version is1.7+

Quick ReferenceNormal dialog box

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

Run

modal dialog box

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

Run

Bubble Floating Layer

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

Run

12 Directional Positioning Demo

Add button

1. Ok and Cancel button:

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

Run

2. Specify more Buttons:

Please refer to the button method or parameter.

Control dialog box Close

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

Run

Add a check box to the bottom left of the dialog box

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

Run

Block dialog box from closing

A button event returns false without triggering the shutdown.

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();

Run

do not show Close button

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

Run

Create IFRAME Content

Artdialog provides an enhanced version of a page that supports complex IFRAME nesting, creating a dialog box creation method that can be accessed by the IFRAME at the top-level page, for example:

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

Then the sub-page can be top.dialog controlled by the dialog box.

Open the sample page

Tip: The enhanced version has more options than the standard version url , and oniframeload these are several fields.

Method

The method supports chaining calls without special instructions.

Show ([anchor])

Displays the dialog box.

It is centered by default and supports incoming element nodes or event objects.

• The parameter type is HTMLElement : You can snap to the element, and the dialog box will render the bubble style.
• The parameter type is Event Object : Based on event.pageX and event.pageY positioned.

Example

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

Run

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

Run

ShowModal ([anchor])

Displays a modal dialog box.

The remaining attributes and parameters are described in the show([anchor]) method.

Example

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

Run

close ([result])

Close (Hide) the dialog box.

You can receive a return value, see returnvalue.

Note : The close() method only hides the dialog box and does not delete it in the DOM, please use the remove() method.

Remove ()

Destroys the dialog box.

Note : Unlike close([result]) methods, the remove() method removes the dialog-related node from the DOM, and the destroyed dialog box cannot be used again.

The dialog button is clicked and then triggered by default close() , remove() method. If you want to manually control the dialog box to close, you can do the following:

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

Run

content (HTML)

Writes the contents of the dialog box.

htmlParameter support String , HTMLElement type.

Example

Incoming string:

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

Run

Incoming element node:

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

title (text)

Writes the dialog box caption.

Example

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

Run

width (value)

Sets the width of the dialog box.

Example

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

Run

height (value)

Sets the height of the dialog box.

Example

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

Run

Reset ()

Manually refresh the dialog box location.

It is usually necessary to refresh the dialog box position after changing the content size dynamically.

button (args)

Custom button.

Parameters, refer to the option button , and also support the incoming HTML string Fill button area.

Focus ()

Focus dialog box (sticky).

Blur ()

Let the dialog box lose focus.

AddEventListener (Type, callback)

Add an event.

The supported events are:,,,,,, show close beforeremove remove reset focusblur

RemoveEventListener (Type, callback)

Deletes an event.

dialog.get (ID)

An instance of the dialog box that is opened according to get.

Note : This is a static method.

dialog.getcurrent ()

Gets the current (pinned) instance of the dialog box.

Note : This is a static method.

Configuration Parameterscontent

Sets the message content.

Type

String, HtmlElement

Example

Incoming string:

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

Run

Incoming element node:

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

title

Title content.

Type

String

Example

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

Run

StatusBar

The status bar area HTML code.

You can implement a check box similar to "no longer prompted". Note : You must have a button to display it.

Type

String

Example

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

Run

OK

OK button.

The callback function this points dialog to the object, completes the default Close dialog box, and prevents the shutdown if False.

Type

Function

Example

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

Run

Okvalue

(Default value: "ok" ) Determines the button text.

Type

String

Example

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

Run

Cancel

Cancel button.

The Cancel button is also equivalent to the Close button in the title bar, and the Close button is not displayed if the value is false . The callback function this points dialog to the object and executes the default Close dialog box, which false prevents closing if returned.

Type

Function, Boolean

Example

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

Run

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

Run

Cancelvalue

(Default value: "cancel" ) Cancels the button text.

Type

String

Example

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

Run

CancelDisplay

(Default value: true ) Whether to display the Cancel button.

Type

Boolean

Example

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

Run

Button

Custom button groups.

Type

Array

Options

name	type	Description
Value	String	button to display text
Callback	Function	(optional) The callback function this points dialog to the object, executes the default close and Destroy dialog box ( close() executed remove() in turn), and if returned, false blocks the shutdown and destruction
Autofocus	Boolean	(Default value: false ) Whether auto-focus
Disabled	Boolean	(Default value: false ) Whether to disable

Example

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

Run

width

Sets the width of the dialog box content .

Type

String, number

Example

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

Run

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

Run

Height

Sets the height of the dialog box content .

Type

String, number

Example

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

Run

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

Run

Skin

Sets additional parameters for the dialog box className .

classNamePlease use a space to separate the multiple.

Type

String

Example

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

padding

(Default: inherit CSS file Settings ) set the message content to the padding margin of the message container, which is the style padding property

Type

String

Example

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

Run

fixed

(Default value: false ) Turn on fixed positioning.

Fixed positioning is position a property of css2.1, which can be fixed in a browser somewhere, and not affected by scroll bar dragging. IE6 and some mobile browsers do not support it, the interior will be turned into absolute positioning.

Type

Boolean

Example

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

Run

Align

(Default value: "bottom left" ) Sets the alignment of the dialog box with other elements.

If show(elem) the showModal(elem) argument is valid with the incoming element, the align following alignment is supported:

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

Type

String

Example

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

Run

12 Directional Positioning Demo

Autofocus

(Default value: true ) Whether auto-focus is supported.

Type

Boolean

Quickclose

(default: false) whether to click Blank out to quickly close.

Type

Boolean

Example

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

Run

ZIndex

(Default value: 1024 ) Resets the global zIndex initial value to change the height of the dialog box overlay.

For example, sometimes with external floating layer UI components, but they may zIndex not default dialog box high, resulting in cannot float to the dialog box, this time you can give the dialog box to specify a small zIndex value.

Note that this is a configuration that affects the global, and the subsequent dialog box overlay height will be added again.

Type

Number

Example

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

Run

OnShow

dialog box to open the event.

The callback function points to the this dialog object.

Type

Function

Example

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

Run

OnClose

The event that is executed when the dialog box is closed.

The callback function points to the this dialog object.

Type

Function

Example

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

Run

Onbeforeremove

The dialog box destroys the previous event.

The callback function points to the this dialog object.

Type

Function

OnRemove

The dialog box destroys the event.

The callback function points to the this dialog object.

Type

Function

Example

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

Run

onfocus

dialog box to get the focus event.

The callback function points to the this dialog object.

Type

Function

onblur

The dialog box loses the focus event.

The callback function points to the this dialog object.

Type

Function

onreset

The dialog box position resets the event.

The callback function points to the this dialog object.

Type

Function

ID

Sets the unique identifier for the dialog box.

1. Prevents the Duplicate ID dialog box from popping up.
2. Supports dialog.get(id) the use of an interface to get a dialog box.

Type

String

Example

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

Run

PropertiesOpen

Determines whether the dialog box is open.

returnvalue

The dialog box returns a value.

Example

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();

Run

otherCustom Styles

Open the configuration file: Src/dialog-config.js, where the cssUir field is the path to the CSS file, and the innerHTML field is the Artdialog template. Modifying these two fields makes it easy to design your own skin.

A set of skins can be added with different className implementations of various states, which can be referred to skin options.

Source Code Construction

Use Gruntjs to execute in Artdialog source root directory.

Artdialog V5 upgrade V6 reference

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

Support

Artdialog is a free, open source program based on the LGPL protocol, which can be done on Github issues (to ensure efficiency, be sure to describe your problem, such as the Artdialog version number, browser version, etc.), with demo. Unqualified issues will likely be closed).

If you like Artdialog, please donate a cup OF coffee to support Artdialog. If you believe that the LGPL open source agreement does not meet your project, you can purchase a commercial license.

TOP

The various pop-up boxes of the front section JS