Options Admin - Responsive Web Application Kit

Confirmation Popovers

One of the most complete bootstrap admin templates!

Toggle Code!

Basic Demo

Add small overlays with "Yes" and "No" buttons, like those on the iPad, to any element. Click the button to trigger the confirmation. Just add data-toggle="confirmation"attribute to button and initialize with js like Bootstrap popovers.

<button type="button" class="btn btn-primary btn-wide" data-toggle="confirmation">Confirmation</button><!-- ========== JS ========== --><script type="text/javascript">    $(function($) {        $('[data-toggle=confirmation]').confirmation();    });</script>

On a Link

Confirmation also works natively with links. You can customize the title with data-titleattribute on link. If you click 'yes', link will be followed. If you click 'No', you will stay on same page.

Go-to Link

<a class="btn btn-primary btn-wide" data-toggle="confirmation" data-title="Open Link?"  href="https://themeforest.net/item/salt-multipurpose-html5-template/16422281?ref=salttechno" target="_blank">Go-to Link</a><!-- ========== JS ========== --><script type="text/javascript">    $(function($) {        $('[data-toggle=confirmation]').confirmation();    });</script>

Personalization

Has personalized description, labels, icons and colors.

<button class="btn btn-large btn-primary" data-toggle="confirmation"        data-btn-ok-label="Continue" data-btn-ok-icon="glyphicon glyphicon-share-alt"        data-btn-ok-class="btn-success"        data-btn-cancel-label="Stoooop!" data-btn-cancel-icon="glyphicon glyphicon-ban-circle"        data-btn-cancel-class="btn-danger"        data-title="Is it ok?" data-content="This might be dangerous">  Confirmation</button><!-- ========== JS ========== --><script type="text/javascript">    $(function($) {        $('[data-toggle=confirmation]').confirmation();    });</script>

Custom Buttons

Completely overwrite the default positive/negative buttons.

<button class="btn btn-primary" data-toggle="confirmation-custom" data-title="Approve item ?">Confirmation</button><!-- ========== JS ========== --><script type="text/javascript">    $(function($) {        $('[data-toggle=confirmation-custom]').confirmation({            buttons: [              {                label: 'Approved',                class: 'btn btn-xs btn-success',                icon: 'glyphicon glyphicon-ok'              },              {                label: 'Rejected',                class: 'btn btn-xs btn-danger',                icon: 'glyphicon glyphicon-remove'              },              {                label: 'Need review',                class: 'btn btn-xs btn-warning',                icon: 'glyphicon glyphicon-search'              },              {                label: 'Decide later',                class: 'btn btn-xs btn-default',                icon: 'glyphicon glyphicon-time'              }            ]          });    });</script>

Singleton

Only one box visible at once.

<button class="btn btn-default" data-toggle="confirmation" data-singleton="true">Confirmation 1</button><button class="btn btn-default" data-toggle="confirmation" data-singleton="true">Confirmation 2</button><!-- ========== JS ========== --><script type="text/javascript">    $(function($) {        $('[data-toggle=confirmation]').confirmation();    });</script>

Popout

Click anywhere on the page to close all boxes.

<button class="btn btn-default" data-toggle="confirmation" data-popout="true">Confirmation 1</button><button class="btn btn-default" data-toggle="confirmation" data-popout="true">Confirmation 2</button><!-- ========== JS ========== --><script type="text/javascript">    $(function($) {        $('[data-toggle=confirmation]').confirmation();    });</script>

Four directions

You can easily add direction of the popover. You just have to add another attribute data-placementwith value.

<button class="btn btn-default" data-toggle="confirmation" data-popout="true" data-placement="left">Confirmation on left</button><button class="btn btn-default" data-toggle="confirmation" data-popout="true" data-placement="top">Confirmation on top</button><button class="btn btn-default" data-toggle="confirmation" data-popout="true" data-placement="bottom">Confirmation on bottom</button><button class="btn btn-default" data-toggle="confirmation" data-popout="true" data-placement="right">Confirmation on right</button><!-- ========== JS ========== --><script type="text/javascript">    $(function($) {        $('[data-toggle=confirmation]').confirmation();    });</script>

John Doe