nuBuilder Forum

Code: Select all

$.confirm({

    title: 'Confirm',
    opacity: 0.5,
    boxWidth: '50%', // 200px
    useBootstrap: false,
    modal: true,
    closeIcon: true,
    resizable: true,
    zIndex: 10000,
    container: '#nuhtml',
    content: 'Do you want to proceed?',
    buttons: {

        confirm: {
            text: 'Yes',
            btnClass: 'btn-blue',
            keys: ['enter', 'y'], // keyboard event for button
            action: function(heyThereButton) {
                alert('Yes clicked');
            }
        },

        cancel: {
            text: 'Cancel',
            btnClass: 'btn-blue',
            keys: ['enter', 'c'], 
            action: function(heyThereButton) {
                alert('Cancel clicked');
            }
        }

    }

});

Code: Select all

    var confirmContent = `
    
			<select id="myOption">
				<option disabled selected value> -- select an option -- </option>
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>		
			</select>

    `;
	
	$.confirm({
    
        title: 'Select an Option',
        opacity: 0.5,
        boxWidth: '50%', // 200px
        useBootstrap: false,
        modal: true,
        closeIcon: true,
        resizable: true,
        zindex: 10000,
        container: '#nuhtml',
        content: confirmContent,
        keyboardEnabled: true,
        buttons: {
    
            confirm: {
                text: 'OK',
                btnClass: 'btn-blue',
                keys: ['enter', 'y'], // keyboard event for button
                action: function(btn) {
                    const selectedOption = nuGetText('myOption');		
					alert(`${selectedOption} selected`);
                }
            },
    
            cancel: {
                text: 'Cancel',
                btnClass: 'btn-blue',
                keys: ['enter', 'c', 'esc'], 
                action: function(btn) {
                     alert('Cancel clicked');
                }
            }
    
        }
    
    });