WrapAdmin provides streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Basic
Default
Most basic sample
Large modal
.modal-lg
applies to .modal-dialog
Small modal
.modal-sm
applies to .modal-dialog
Modal width
Feel free to add any desire width to .modal-dialog
using inline style or .w-*px
utility classes.
Modal types
Top
.modal-top
applies to .modal
Center
.modal-center
applies to .modal
Bottom
.modal-bottom
applies to .modal
Left
.modal-left
applies to .modal
Fill
.modal-fill
applies to .modal
Right
.modal-right
applies to .modal
Modaler
Modaler is a shorthand utility to create modals for a specified content. You can create any type of modals using modaler plugin. The content can be load from a specific URL, direct HTML or HTML of targeted element.
Examples using Javascript
Basic
Some options
Events
Examples using data attributes
Basic
Some options
Events
Usage
Trigger the modaler via JavaScript:
app.modaler(options)
Trigger the modaler via data-attribute when user click on the element:
<button data-provide="modaler" data-url="path/to/modal.html">Launch modaler</button>
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-url="value"
or data-is-modal="value"
.
Name | Type | Default | Description |
---|---|---|---|
url |
String | null | Provide a URL that content should come from. It could be a content to insert inside .modal-body or a whole modal component (see isModal ). |
isModal |
Boolean | false | If you are loading a modal component instead of a content, you should set this option to true .Please note that if it's true, the rest of options doesn't work anymore. |
html |
String | null | The HTML content to be inserted inside .modal-body . |
target |
String | null | A selector to retrive HTML from and insert inside .modal-body . |
type |
String | null | Any modal type from: top , bottom , left , right , center , fill , |
size |
String | null | sm , lg or any .w-* utility clasess. |
title |
String | null | Title of the modal. |
backdrop |
Boolean | true | Includes a modal-backdrop element. |
headerVisible |
Boolean | true | Modal should have .modal-header which contains title and close button. |
footerVisible |
Boolean | true | Modal should have .modal-footer which contains action buttons. |
confirmVisible |
Boolean | true | Include a confirm button in the footer. |
confirmText |
String | 'Ok' | Use this to change the text on the confirm button. |
confirmClass |
String | 'btn btn-w-sm btn-flat btn-primary' | Use this option to change appearance of confirm button. |
cancelVisible |
Boolean | false | Include a cancel button in the footer. |
cancelText |
String | 'Cancel' | Use this to change the text on the cancel button. |
cancelClass |
String | 'btn btn-w-sm btn-flat btn-secondary' | Use this option to change appearance of cancel button. |
bodyExtraClass |
String | null | Add extra classes to .modal-body . |
spinner |
String | See description |
A HTML content to place inside .modal-body while the main content fetch from the URL. Default is:
|
onShow |
Function | null | Function to run when the show.bs.modal event fires on the modal. |
onShown |
Function | null | Function to run when the shown.bs.modal event fires on the modal. |
onHide |
Function | null | Function to run when the hide.bs.modal event fires on the modal. |
onHidden |
Function | null | Function to run when the hidden.bs.modal event fires on the modal. |
onConfirm |
Function | null | Function to run when confirm button clicks, provides modal DOM element as the first argument. |
onCancel |
Function | null | Function to run when cancel button clicks, provides modal DOM element as the first argument. |
WrapAdmin provides streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Examples
Basic
Most basic dock component.
Advanced header
Using dropdown, other buttons and icon
Header color
Use .dock-wa-header-inverse
and .bg-*
Sizing
You can apply .dock-{size}
to a .dock where {size}
can be any of xs
, sm
, lg
, and xl
.
Ajax load
Give a data-url
attribute to your .dock component.
Chat box
This dock is populated with extra data.
Documentation
Following code demonstrate a basic code for including a dock in your page. Please note that all of your docks should be wrapped inside a .dock-list
. Each page only have one .dock-list and it should be inside <body> tag.
<div class="dock-list">
<!-- Basic setup -->
<div id="dock-basic" class="dock">
<header class="dock-header">
<div class="dock-title">
<span>Most basic dock</span>
</div>
<div class="dock-actions">
<span title="Close" data-provide="tooltip" data-dock="close"></span>
<span title="Maximize" data-provide="tooltip" data-dock="maximize"></span>
<span title="Minimize" data-provide="tooltip" data-dock="minimize"></span>
</div>
</header>
<div class="dock-body">
<div class="dock-block">
Your content comes here
</div>
</div>
</div>
</div>
Ajax load
As you can see in the example, you should add data-url
attribute to your .dock or .dock-body, so the contentwill load from the URL you specify. Please consider that it only loads once. If you need to load the content from URL everytime that dock opens, add data-always-reload="true"
to the element.

Hi
How are you ...???
What are you doing tomorrow?
Would you like to get out of the town for a while?
Hiii, I'm good.
How are you doing?
Long time no see!

Yeah
We were out of country for a vacation. We visited several beautiful countries and made a lot of memmories. :stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye:
That's awesome!
You should tell me everything with all small details. I'm so curious to hear your stories.
Did you take pictures?
These places are fantastic. Wish I could join you guys :disappointed: :disappointed:

You can actually. We are planning our next vacation for new year holidays :wink:
Are you serious?!! :heart_eyes:
WrapAdmin provides streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
How to use
Apply data-provide="lity"
to any <a> badge to open it's href content in a lightbox.
Even you can convert a html content to a lightbox by .
Html contentYou can put any HTML code here.
WrapAdmin provides streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
$('button').on('click', function(){
swal('Any fool can use a computer')
});
$('button').on('click', function(){
swal(
'The Internet?',
'That thing is still around?',
'question'
)
});
$('button').on('click', function(){
swal(
'Good job!',
'You clicked the button!',
'success'
)
});
$('button').on('click', function(){
swal({
title: 'Auto close alert!',
text: 'I will close in 2 seconds.',
timer: 2000
})
});
$('button').on('click', function(){
swal({
title: '<i>HTML</i> <u>example</u>',
type: 'info',
html:
'You can use <b>bold text</b>, ' +
'<a href="//github.com">links</a> ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i>'
})
});
$('button').on('click', function(){
swal({
title: 'jQuery HTML example',
html: $('<div>')
.addClass('some-class')
.text('jQuery is everywhere.')
})
});
$('button').on('click', function(){
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function() {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
);
})
});
$('button').on('click', function(){
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-primary',
cancelButtonClass: 'btn btn-secondary',
buttonsStyling: false
}).then(function() {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
);
}, function(dismiss) {
// dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
if (dismiss === 'cancel') {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
);
}
})
});
$('button').on('click', function(){
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
animation: false
})
});
Documentation
Since SweetAlert executes by a Javascript function, to load its dependencies you have to attach data-provide="sweetalert"
to your document. Best place would be the first <script> tag.