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.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments