Vex Dialog — Multiple Buttons Example

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-default.css" rel="stylesheet" />
<script>vex.defaultOptions.className = 'vex-theme-default';</script>
<style>
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-continue-shopping {
    background: #C54291;
    color: #fff;
}

JavaScript

vex.dialog.open({
    message: 'How would you like to procede?',
    contentCSS: { width: '600px' },
    buttons: [
        $.extend({}, vex.dialog.buttons.NO, { className: 'vex-dialog-button-primary', text: 'Checkout', click: function($vexContent, event) {
            $vexContent.data().vex.value = 'checkout';
            vex.close($vexContent.data().vex.id);
        }}),
        $.extend({}, vex.dialog.buttons.NO, { className: 'vex-dialog-button-continue-shopping', text: 'Continue shopping', click: function($vexContent, event) {
            $vexContent.data().vex.value = 'continue-shopping';
            vex.close($vexContent.data().vex.id);
        }}),
        $.extend({}, vex.dialog.buttons.NO, { text: 'View cart', click: function($vexContent, event) {
            $vexContent.data().vex.value = 'view-cart';
            vex.close($vexContent.data().vex.id);
        }})
    ],
    callback: function(value) {
        // value will be one of the following:
        // false, "checkout", "continue-shopping", "view-cart"
        console.log('Choice', value);
    }
});