Examples
List of modules
-
Ace Editor
Affix
Alert
Audio
Button
Carousel
Char Counter
Color Picker
Data Table
Datepicker
Diagram Builder
Dropdown
Form Builder
Form Validator
I/O
Image Cropper
Image Viewer
Modal
Node
Pagination
Popover
Progress Bar
Rating
Scheduler
Scrollspy
Sortable Layout
Sortable List
Tabview
Timepicker
Toggler
Toolbar
Tooltip
TreeView
Video
Viewport
Modal
<button id="showModal" class="btn btn-primary">Show Modal</button>
<div class="yui3-skin-sam">
<div id="modal"></div>
</div>
YUI().use(
'aui-modal',
function(Y) {
var modal = new Y.Modal(
{
bodyContent: 'How many pages do you want to print?',
centered: true,
destroyOnHide: false,
headerContent: '<h3>Print</h3>',
modal: true,
render: '#modal',
resizable: {
handles: 'b, r'
},
toolbars: {
body: [
{
icon: 'glyphicon glyphicon-file',
label: 'Single Page'
},
{
icon: 'glyphicon glyphicon-book',
label: 'All Pages'
}
]
},
visible: true,
width: 450
}
).render();
modal.addToolbar(
[
{
label: 'Cancel',
on: {
click: function() {
modal.hide();
}
}
},
{
label: 'Okay',
on: {
click: function() {
alert('Just an example, there will be no printing here.');
}
}
}
]
);
Y.one('#showModal').on(
'click',
function() {
modal.show();
}
);
}
);