Welcome to the nuBuilder forums!

Please register and login to view forums and other content only available to registered users.

[Added] jQuery-confirm: Alerts, confirms and dialogs in one.

Information about updates, news, Code Library
Post Reply
admin
Site Admin
Posts: 2738
Joined: Mon Jun 15, 2009 2:23 am
nuBuilder Version: 4.5

[Added] jQuery-confirm: Alerts, confirms and dialogs in one.

Unread post by admin »

jQuery-confirm is a plugin that provides great set of features like, Auto-close, Ajax-loading, Themes, Animations and more.

Example:
example.png
example.png (6.2 KiB) Viewed 205 times

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');
            }
        }

    }

});
kev1n
nuBuilder Team
Posts: 3014
Joined: Sun Oct 14, 2018 6:43 pm
nuBuilder Version: 4.5
Been thanked: 4 times
Contact:

Re: [Added] jQuery-confirm: Alerts, confirms and dialogs in one.

Unread post by kev1n »

Example to embed a select element:
select_option.png
select_option.png (7.02 KiB) Viewed 140 times

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');
                }
            }
    
        }
    
    });

Post Reply