Modal Options

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:
<div class="h-200px center-vh">
  <svg class="spinner-circle-material-svg" viewBox="0 0 50 50">
    <circle class="circle" cx="25" cy="25" r="20">
  </svg>
</div>
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.
Dock Options

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.

Most basic dock
Your content comes here
Compose email
Your content comes here
Colored header
Your content comes here
Small size
Your content comes here
Message Hossein
...

Hi

How are you ...???

What are you doing tomorrow?
Would you like to get out of the town for a while?

Today

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?

...

We took a loooot. Here is some of them, I'll show you the rest once we meet.

... ... ...

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:

...
Lity Options

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 content
Sweetalert Options

WrapAdmin provides streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Basic message
$('button').on('click', function(){
  swal('Any fool can use a computer')
});
A title with a text under
$('button').on('click', function(){
  swal(
    'The Internet?',
    'That thing is still around?',
    'question'
  )
});
A success message!
$('button').on('click', function(){
  swal(
    'Good job!',
    'You clicked the button!',
    'success'
  )
});
A message with auto close timer
$('button').on('click', function(){
  swal({
    title: 'Auto close alert!',
    text: 'I will close in 2 seconds.',
    timer: 2000
  })
});
Custom HTML description and buttons
$('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>'
  })
});
jQuery HTML
$('button').on('click', function(){
  swal({
    title: 'jQuery HTML example',
    html: $('<div>')
      .addClass('some-class')
      .text('jQuery is everywhere.')
  })
});
A warning message, with a function attached to the "Confirm"-button...
$('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'
    );
  })
});
... and by passing a parameter, you can execute something else for "Cancel".
$('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'
      );
    }
  })
});
A message with a custom image and CSS animation disabled
$('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.