Wednesday, July 24, 2024
HomejQueryCreate Alert/Affirm/Toast Popups Utilizing Bootstrap Modal - NewmcAlertConfirm.js

Create Alert/Affirm/Toast Popups Utilizing Bootstrap Modal – NewmcAlertConfirm.js


NewmcAlertConfirm.js is a straightforward but totally customizable Bootstrap modal supervisor constructed utilizing jQuery. 

It lets you simply create alert/verify dialogs and toast-like notification popups utilizing Bootstrap’s modal part. At present helps Bootstrap 4.

The right way to use it:

1. Embrace the plugin’s recordsdata in your Bootstrap web page after jQuery library.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap -->
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- jQuery NewmcAlertConfirm.js -->
<hyperlink rel="stylesheet" href="/path/to/NewmcAlertConfirm.css" />
<script src="/path/to/NewmcAlertConfirm.js"></script>

<!-- Non-obligatory Font Superior Icons  -->
<hyperlink rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />

2. Create a placeholder for the modal.

<div id="NewmcAlertConfirm" class="newmc-dialog-plugin"></div>

3. Create alert/verify dialogs.

var customAlertConfirm = new NewmcAlertConfirm({

    // modal = verify dialog
    // alert = alert dialog
    dialog: 'modal',

    // success, warning, alert, or information
    sort: 'success',

    title: 'Dialog Title',
    physique: 'Dialog Physique',
    motion: 'Affirm Message',

});

4. Create a toast notification popup that auto-dismiss itself after 5 seconds.

<div id="NewmcAlertConfirmTimer" class="newmc-dialog-plugin"></div>
var customToast = new NewmcAlertConfirm({

    containerID: 'NewmcAlertConfirmTimer', 
    title: 'Toast Title',
    physique: 'Toast Physique',
    timeOutHide: 5000,  

});

5. The plugin additionally permits you to redirect the present web page to a different URL.

var customRedirect = new NewmcAlertConfirm({

    title: 'Auto Redirect',
    physique: 'Redirect To jQueryScript After 3 Seconds',
    href: 'https://www.jqueryscript.web',
    hrefDelay: 3000,  
    
});

6. All default plugin choices.

new NewmcAlertConfirm({

    'containerID'   : 'NewmcAlertConfirm',
    'dialog'        : 'modal',
    'sort'          : 'default', 
    'colour'         : '#222222',
    'bgcolor'       : 'white', 
    'icon'          : 'fa-check-circle',
    'eID'           : null,
    'checked'       : true,
    'title'         : 'NewMC Customized Title',
    'physique'          : 'NewMC Customized Physique.', 
    'motion'        : 'Carry out NewMC Customized Motion?',
    'href'          : null, 
    'hrefDelay'     : 0,
    'timeOutHide'   : null,
    'returnFalse'   : false,
    'triggerON'     : true,
    'cancelText'    : 'Cancel',
    'okText'        : 'OK'       

});

This superior jQuery plugin is developed by cybermano. For extra Superior Usages, please examine the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments