Framework | Framework

Button Chart Checkbox / Toggle Confirmation Popover DataTables DateTime Datepicker Email Error Page Error Messages Export CSV/PDF Form Upload Image/File Namespaces Number Plugins Scanner Select / Autocomplete Text / Textarea

Popover with Minimum Configuration

Show Confirmation

HTML

<a class="btn btn-primary" data-fd-control="confirmationpopover" 
        data-fd-confirmcallback="handleConfirm">Show Confirmation</a>

JavaScript

FD.Page.handleConfirm = function (data, event) {
    notify.confirm('Confirmed!');
};

FD.Page.handleCancel = function (data, event) {
    notify.alert('Canceled :(');
};

Popover with Confirm and Cancel Callbacks

The data-fd-cancelcallback attribute is optional. If left blank, clicking the "Cancel" button will simply hide the popover

Show Confirmation

HTML

<a class="btn btn-primary" data-fd-control="confirmationpopover" 
        data-fd-confirmcallback="handleConfirm" 
        data-fd-cancelcallback="handleCancel" 
        data-fd-message="Are you sure?">Show Confirmation</a>

JavaScript

FD.Page.handleConfirm = function (data, event) {
    notify.confirm('Confirmed!');
};

FD.Page.handleCancel = function (data, event) {
    notify.alert('Canceled :(');
};

Custom Button Colors and Labels

Delete Confirmation

HTML

<a class="btn btn-primary" data-fd-control="confirmationpopover" 
    data-fd-confirmcallback="handleConfirm"
    data-fd-confirmclass="btn-danger"
    data-fd-confirmlabel="Please Delete!"
    data-fd-cancelcallback="handleCancel"
    data-fd-cancelclass="btn-link"
    data-fd-cancellabel="Nope!"
    data-fd-message="Are you sure?">Show Confirmation</a>

JavaScript

FD.Page.handleConfirm = function (data, event) {
    notify.confirm('Confirmed!');
};

FD.Page.handleCancel = function (data, event) {
    notify.alert('Canceled :(');
};