John Doe
PHP DeveloperConfirmation Popovers
One of the most complete bootstrap admin templates!
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.
<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>