Dialog

Dialog

With the class .dialog you can create dialog boxes similar to the popup, the dialog element is formed by a dialog-header, a body and a dialog-dialog-footer, but it is also possible to use it without these elements, the basic dialog box has in the upper left icon to close, but it is also possible to add a button or more for closing the same, adding the item attribute date-dismiss="true", it is also possible to set an effect on the dialog box before the appearance of adding the attribute data-effect="bounce" of the base effect is linear, setting the attribute [data-open-dialog] of an element is passing the id of the dialog box, you can open it directly

Events jsbefore-showafter-showafter-close

Example

Open Dialog
Sono il titolo?
Sono il body

Example with action bar

Open Dialog
Are you sure you want to delete the product?
Deleting the product is no longer possible to recover.

Note

Before appearing dialog window of an event is thrown in javascript likebefore-show which you can bindarsi to load data asynchronously in the window, after closing is launched the eventafter-close

Example of use of the event before-show and after-close

Open Dialog
Before I open myself launched an event before-show with which you can load the data asynchronously, for example in ajax, after closing i will send you another event after-close with which for example can empty myself

Javascript

zjs('#simpleDialogAs').bind('before-show',function(p){
 alert('opening dialog');
});
zjs('#simpleDialogAs').bind('after-close',function(p){
 alert('close dialog');
});

Example of dialog with bounce effectdata-effect="bounceEaseOut"

Open Dialog
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Example of dialog zoom image

Cavetto hdmi nero Fiore di girasole

Javascript

zjs('#simpleDialogImage').bind('before-show',function(button){
  zjs(this).children('img').attr('src', zjs(button).attr('src'));
  zjs(this).children('p').html(zjs(button).attr('alt'));
});

Example of login dialog with dialog grafted clickforgot password

Login
Please login
@
Password forgotten?
Please enter the e-mail address used during registration.

Element dialog you can set the attribute data-duration="200"(ms) to indicate the duration of the animation, also if you want to rumuovere the close button in another simply set always on 'dialog element attributedata-dismiss="false"

Example 200 with the duration and data-dismiss="false"

Contact

Example dialog loading

Sending in progress...

Dialog static

The component with the class .dialog-static has the same characteristics of a component with the class .dialog but it is always visible

example:

Login

Dialog data-send-url

With the attributedata-send-url set on an element of the dialog you can send a request ajax post automatically, if the server returns a string that will be applied to the dialog, if the answer is an empty string the page is reloaded

response string

<div class="msg danger"><span class="fa fa-warning"></span> Username or password incorrect!</div>

Login
Login

Dialog show/hide function hideDialog(dialog) showDialog(dialog, duration, timing)

This function hideDialog(dialog) allows you to hide the dialog

This function showDialog(dialog, duration,timing) allows you to show the dialog

Params:

dialog a zjs object

duration in milliseconds of the animation

timing effect of the animation

Show dialog
dialog show hide
Close dialog