You must use javascript to create a dialog.
CallZ.dialog()to open a dialog.
The default dialog contains a cancel button and a ok button. When the cancel button is clicked, the dialog will be destroyed.
Note: Only 1 dialog can be opened at the same time.
var content = "Zero-UI is a powerfull UI component framework which includes some global styles and a set of components. Some of Zero-UI's components use flexbox layout. Mainframe browsers and IE10+ are supported. Zero-UI uses font-awesome as icon fonts. v4.7 is recommended. If you don't include it, some components may not display properly. Zero-UI's javascript components require jQuery. v3.0+ is recommended.";
$('#btn1').on('click', function() {
Z.dialog({
title: 'Title',
content: content
});
});
Z.dialog({
content: content
});
Z.dialog({
title: 'Title',
content: content,
cancelButton: false,
okButton: false
});
Z.dialog({
title: 'Title',
content: content,
cancelButton: false,
onOK: function(dlg) {
dlg.close();
}
});
You can customize the buttons with theactionsoption.
Theactionsmust be an array.
The Dialog instance will be passed as the parameter of the onClick function.
Z.dialog({
title: 'Title',
content: content,
actions: [{
tmplt: '<button class="z-btn primary">Button1</button>',
onClick: function(dlg) {
alert('You clicked button1！')
}
}, {
tmplt: '<button class="z-btn default">Button2</button>',
onClick: function(dlg) {
alert('You clicked button2！')
}
}, {
tmplt: '<button class="z-btn red">Close</button>',
onClick: function(dlg) {
dlg.close()
}
}]
});
Generate the dialog's content from html.
If the dialog contains other components, you can initialize them in theonOpen()function. You can access the jquery object of the dialog content viadlg.el.
<!-- html -->
<div id="form" style="display: none">
<form class="form" style="margin-left: -35px">
<div class="form-row">
<label class="form-label col-2">Name:</label>
<div class="form-control-wrapper col-4">
<input type="text" name="name" class="form-control">
</div>
<label class="form-label col-2">Email:</label>
<div class="form-control-wrapper col-4">
<input type="text" name="email" class="form-control">
</div>
</div>
<div class="form-row">
<label class="form-label col-2">Birth:</label>
<div class="form-control-wrapper col-4">
<input type="text" name="birth" class="form-control">
</div>
<label class="form-label col-2">Address:</label>
<div class="form-control-wrapper col-4">
<input type="text" name="addr" class="form-control">
</div>
</div>
</div>
</form>
</div> // javascript
Z.dialog({
title: 'Title',
width: 600,
content: $('#form').html(),
onOpen: function(dlg) {
dlg.el.find('[name=birth]').datetimepicker();
}
});
The call back funtions will be called at different phases of the dialog's life circle.
The Dialog instance will be passed as the parameter of the function.
Z.dialog({
title: 'Title',
content: content,
onOpen: function(dlg) {
alert('The dialog will open')
},
onOK: function(dlg) {
alert('You clicked OK!')
}
});
| Name | Type | Default | Desc |
|---|---|---|---|
| title | String | null | Title of the dialog |
| width | Number/String | 50% of the page width |
Width of the dialog
e.g. 500 or '500px' or '80%' |
| content | Html/String | '' | Content of the dialog |
| okButton | Boolean | true | Whether there's an 'OK' button |
| cancelButton | Boolean | true | Whether there's an 'Cancel' button |
| actions | Array | [] |
Customize the buttons.
See the examples. |
| onOpen | Function | function(dlg) {} |
Fires when the dialog is opened
param: dlg - The dialog instance |
| onClose | Function | function(dlg) {} |
Fires when the dialog is closed
param: dlg - The dialog instance |
| onOK | Function | function(dlg) {} |
Fires when the 'OK' button is clicked
param: dlg - The dialog instance |
| Name | Return | Desc |
|---|---|---|
| dlg.close() | Close and destroy the dialog |