Post
Ask Question

Custom Alert, Prompt, And Confirm Box Using jQuery And Bootstrap

Hello friends!

I am here with another article for you where I am going to share something simple but interesting. Recently, I used a prompt of JavaScript to get username but somehow it showed some title on the top of the prompt box, like "Page says...". I have searched through many sites but couldn't found any solution to remove this title. As per some security reasons, Chrome must display this title in JavaScript's Alert, Prompt, and Confirm Box. So, I have decided to create a custom popup for all three types.

Please have a look at the functionality of all these three types of popup available in JavaScript.

Alert

 
If we ensure a piece of information through a user, we often use an alert box. When an alert box pops up, the user has to click on "OK" to proceed.

Confirm

 
A confirm box is often used if you want the user to verify or accept something. When a confirmation box pops up, the user has to either click "OK" or "Cancel" to proceed. If the user clicks on "OK", then the box is correct. If the user clicks on "cancel", the box returns incorrectly.

Prompt

 
A prompt box is often used if you want to give input functionality to the user before entering the page. When a signal box pops up, the user clicks on either "OK" or "Cancel" to proceed with entering the input value. If the user clicks "OK", then the box returns the input value. If the user clicks "Cancel", the box gets the null field.

For creating custom pop-ups, we need to include jQuery and Bootstrap. I have used a CDN path for this. You can also install this with npm or just use this CDN.

Here is the code of Index.html file.

  1. <html>  
  2.     <head>  
  3.         <title>Bootstrap Example</title>  
  4.         <meta charset="utf-8">  
  5.             <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.                 <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  7.                     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.                     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  9.                 </head>  
  10.                 <style>  
  11. .btns {  
  12. margin: 250px auto 50px;  
  13. width: 600px;  
  14. }  
  15. </style>  
  16.                 <body>  
  17.                     <div class="btns text-center">  
  18.                         <button type="button" class="btn btn-warning" onClick="createModal('We aware', 'some text here which want to show as warning..', 'alert')">Alert Modal</button>  
  19.                         <button type="button" class="btn btn-primary" onClick="createModal('Enter your name', 'Name', 'prompt')">Prompt Modal</button>  
  20.                         <button type="button" class="btn btn-danger" onClick="createModal('Are you sure!!', 'Some message here...', 'confirm')">Confirm Modal</button>  
  21.                     </div>  
  22.                     <!-- modal-dialog -->  
  23.                     <div class="modal fade" tabindexrole="dialog" id="custom-modal">  
  24.                         <div class="modal-dialog modal-sm" role="document">  
  25.                             <div class="modal-content">  
  26.                                 <!-- modal-header -->  
  27.                                 <div class="modal-header" id="modal-head"></div>  
  28.                                 <!-- modal-body -->  
  29.                                 <div class="modal-body" id="modal-body"></div>  
  30.                                 <!-- modal-footer -->  
  31.                                 <div class="modal-footer" id="modal-footer"></div>  
  32.                             </div>  
  33.                         </div>  
  34.                     </div>  
  35.                     <h1 id="user-name" class="text-center"></h1>  
  36.                     <script>  
  37.                      function createModal(title, message, type) {  
  38.                            customModal(title, message, type);  
  39.                         }  
  40.                      function customModal(head, body, type) {  
  41.                         if(type == 'prompt') {  
  42.                            $('#modal-head').html('  
  43.                         <h4 class="modal-title">'+head+'</h4>');  
  44.                            $('#modal-body').html('  
  45.                         <div class="row">  
  46.                             <label class="col-sm-3">Name</label>  
  47.                             <div class="col-md-9">  
  48.                                 <input class="form-control" type="text" id="name-input">  
  49.                                 </div>  
  50.                             </div>');  
  51.                         $('#modal-footer').html('  
  52.                             <button type="button" class="btn btn-primary" id="done-btn">Done</button>  
  53.                             <button type="button" class="btn btn-danger" id="cancel-btn">Cancel</button>');  
  54.                              $('#custom-modal').modal('show');  
  55.                               $('#cancel-btn').on('click', function() {  
  56.                                   return response('cancel');  
  57.                                });  
  58.                               $('#done-btn').on('click', function() {  
  59.                                     return response('done');  
  60.                               });  
  61.                            } else if( type == 'alert') {  
  62.                                  $('#modal-head').html('  
  63.                             <h4 class="modal-title">'+head+'</h4>');  
  64.                               $('#modal-body').html('  
  65.                                   <p>' + body + '</p>');  
  66.                               $('#modal-footer').html('  
  67.                             <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>');  
  68.                               $('#custom-modal').modal('show');  
  69.                               } else if( type == 'confirm') {  
  70.                                   $('#modal-head').html('  
  71.                             <h4 class="modal-title">'+ head +'</h4>');  
  72.                               $('#modal-body').html('  
  73.                                   <p>' + body + '</p>');  
  74.                               $('#modal-footer').html('  
  75.                             <button type="button" class="btn btn-primary" id="ok-btn">Ok</button>/  
  76.   
  77.                             <button type="button" class="btn btn-danger" id="cancel-btn">Cancel</button>');  
  78.                               $('#custom-modal').modal('show');  
  79.                               $('#cancel-btn').on('click', function() {  
  80.                                     return response('cancel');  
  81.                                  });  
  82.                               $('#ok-btn').on('click', function() {  
  83.                                     return response('ok');  
  84.                                     });  
  85.                                     }  
  86.                                  }  
  87.                            function response(type) {  
  88.                               if(type == 'done') {  
  89.                               if(document.getElementById('name-input').value != '') {  
  90.                                  $('#user-name').html( 'Welcome '+ document.getElementById('name-input').value);  
  91.                                  $('#custom-modal').modal('hide');  
  92.                                  return document.getElementById('name-input').value;  
  93.                                  } else {  
  94.                                     alert('Please Enter your name');  
  95.                                     }  
  96.                                  } else if(type == 'cancel') {  
  97.                      $('#custom-modal').modal('hide');  
  98.                            return false;  
  99.                         } else if(type == 'ok') {  
  100.                               $('#custom-modal').modal('hide');  
  101.                               return true;  
  102.                               }  
  103.                            }  
  104.   
  105.                         </script>  
  106.                     </body>  
  107.                 </html>  

Here, you can see the screenshots which show all the three types of custom pop-ups developed by us.

Initial loading screen

Custom Alert, Prompt And Confirm Box Using jQuery And Bootstrap 

Alert Box popup

Custom Alert, Prompt And Confirm Box Using jQuery And Bootstrap

Prompt Box popup

Here, we have inserted some name in the input and on the next screen, this will be shown in HTML.
 
Custom Alert, Prompt And Confirm Box Using jQuery And Bootstrap
 
Custom Alert, Prompt And Confirm Box Using jQuery And Bootstrap 

Confirm Box popup

Custom Alert, Prompt And Confirm Box Using jQuery And Bootstrap


Similar Articles