Custom "confirm" dialog in JavaScript?

javascript jquery jquery-ui dialog modal-dialog

You might want to consider abstracting it out into a function like this:

function dialog(message, yesCallback, noCallback) {    $('.title').html(message);    var dialog = $('#modal_dialog').dialog();    $('#btnYes').click(function() {        dialog.dialog('close');        yesCallback();    });    $('#btnNo').click(function() {        dialog.dialog('close');        noCallback();    });}

You can then use it like this:

dialog('Are you sure you want to do this?',    function() {        // Do something    },    function() {        // Do something else    });

javascript jquery jquery-ui dialog modal-dialog

SweetAlert

You should take a look at SweetAlert as an option to save some work. It's beautiful from the default state and is highly customizable.

Confirm Example

sweetAlert(  {    title: "Are you sure?",    text: "You will not be able to recover this imaginary file!",    type: "warning",       showCancelButton: true,       confirmButtonColor: "#DD6B55",    confirmButtonText: "Yes, delete it!"  },   deleteIt());

javascript jquery jquery-ui dialog modal-dialog

To enable you to use the confirm box like the normal confirm dialog, I would use Promises which will enable you to await on the result of the outcome and then act on this, rather than having to use callbacks.

This will allow you to follow the same pattern you have in other parts of your code with code such as...

  const confirm = await ui.confirm('Are you sure you want to do this?');  if(confirm){    alert('yes clicked');  } else{    alert('no clicked');  }

See codepen for example, or run the snippet below.

https://codepen.io/larnott/pen/rNNQoNp

const ui = {  confirm: async (message) => createConfirm(message)}const createConfirm = (message) => {  return new Promise((complete, failed)=>{    $('#confirmMessage').text(message)    $('#confirmYes').off('click');    $('#confirmNo').off('click');        $('#confirmYes').on('click', ()=> { $('.confirm').hide(); complete(true); });    $('#confirmNo').on('click', ()=> { $('.confirm').hide(); complete(false); });        $('.confirm').show();  });}                     const saveForm = async () => {  const confirm = await ui.confirm('Are you sure you want to do this?');    if(confirm){    alert('yes clicked');  } else{    alert('no clicked');  }}

body {  margin: 0px;  font-family: "Arial";}.example {  padding: 20px;}input[type=button] {  padding: 5px 10px;  margin: 10px 5px;  border-radius: 5px;  cursor: pointer;  background: #ddd;  border: 1px solid #ccc;}input[type=button]:hover {  background: #ccc;}.confirm {  display: none;}.confirm > div:first-of-type {  position: fixed;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  top: 0px;  left: 0px;}.confirm > div:last-of-type {  padding: 10px 20px;  background: white;  position: absolute;  width: auto;  height: auto;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  border-radius: 5px;  border: 1px solid #333;}.confirm > div:last-of-type div:first-of-type {  min-width: 150px;  padding: 10px;}.confirm > div:last-of-type div:last-of-type {  text-align: right;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="example">  <input type="button" onclick="saveForm()" value="Save" /></div><!-- Hidden confirm markup somewhere at the bottom of page --><div class="confirm">  <div></div>  <div>    <div id="confirmMessage"></div>    <div>      <input id="confirmYes" type="button" value="Yes" />      <input id="confirmNo" type="button" value="No" />    </div>  </div></div>

Expand snippet