Simple Dialog

A light-weight dialog component.

Demo

Dependencies

• JQuery 3.0+
• Simple Module 3+

Compatibility

IE 9+ and all the modern browsers because of the using of CSS transform.

Usage

Import simple-dialog dependencies and resources:

<link rel="stylesheet" href="path/to/simple-dialog.css" />
 
<script src="path/to/jquery.min.js"></script>
<script src="path/to/simple-module.js"></script>
 
<script src="path/to/simple-dialog.js"></script>
 

Get a dialog instance:

var dialog = new SimpleDialog({
  content: "<h4 class=dialog-title>hello dialog</h4><p>this is a demo</p>",
  modal: true
});

Meanwhile, there are two shortcuts for you：SimpleDialog.message and SimpleDialog.confirm

var dialog = SimpleDialog.message({
  content: "hello message",
  modal: true
});
 
var dialog = SimpleDialog.confirm({
  content: "hello confirm"
});
 

API

Options

content

String/HtmlString/Element/Array/jQuery, required.

The content displayed on the dialog.

width

Number，600 by default.

modal

Boolean，false by default.

fullscreen

Boolean，false by default.

It's useful on small screen device.

cls

String，extra class names for the popover div.

showRemoveButton

Boolean，true by default.

Whether to show the remove/close button.

focusButton

Selector String，".btn:first" by default.

Which button to focus.

buttons

Obejct/Array.

Buttons displayed on the dialog.

For example:

{
  text: '42',
  callback: function(e){
        alert('You clicked 42 just now!')
    }
}

Class Methods

removeAll()

Destroy all dialogs.

Instance Methods

setContent()

Set the dialog's content.

remove()

Destroy the dialog.

Events

destroy

Triggered when a dialog destroys.

dialog.on 'destroy', ->
  # clean  

Development

Clone repository from github:

git clone https://github.com/mycolorway/simple-dialog.git

Install npm dependencies:

npm install

Run default gulp task to build project, which will compile source files, run test and watch file changes for you:

npm start

Now, you are ready to go.

Publish

If you want to publish new version to npm and bower, please make sure all tests have passed before you publish new version, and you need do these preparations:

• Check the version number in bower.json and package.json.

• Add new release information in CHANGELOG.md. The format of markdown contents will matter, because build scripts will get version and release content from this file by regular expression. You can follow the format of the older release information.

• Put your personal API tokens in /.token, which is required by the build scripts to request Github API for creating new release.

• Commit changes and push.

Now you can run gulp publish task, which will request Github API to create new release.

If everything goes fine, you can see your release at https://github.com/mycolorway/simple-dialog/releases. At the End you can publish new version to npm with the command:

npm publish

Please be careful with the last step, because you cannot delete or republish a release on npm.