javascript: confirm functionality with my own confirm box and function

Question

if (confirm('ARE YOU SURE?')) {console.log('sure');}
else {console.log('not sure');}

I want this functionality with my own confirm box and my own function

<div class='mdialog' id='mdialog'>
<div id='dgcancel' onclick="???">CANCEL</div>
<div id='dgok' onclick="???">OK</div>
<div id='dgquestion'>//here is the question</div>
</div>

if (conf('ARE YOU SURE?')) {console.log('sure');}
else {console.log('not sure');}

function conf(){
// ???
}

Could someone help me to accomplish this?

@executable, I want to replace default `confirm` function with my `conf` function and my own confirm box. — , Jun 20 '18 at 07:49
Possible duplicate of https://stackoverflow.com/questions/6929416/custom-confirm-dialog-in-javascript — executable, Jun 20 '18 at 07:54
Possible duplicate of [Custom "confirm" dialog in JavaScript?](https://stackoverflow.com/questions/6929416/custom-confirm-dialog-in-javascript) — Adelin, Jun 20 '18 at 08:02

score 0 · Answer 1 · answered Jun 20 '18 at 07:55

You have the skeleton for your html.

Instead of ??? put there something replaceable, like {{cancelCallback}}, {{okCallback}}, {{question}}.

Then, create a Dialog class that you can instantiate. Here's a great place to start: What techniques can be used to define a class in JavaScript, and what are their trade-offs?

The class should take as parameters 3 things (not necessarily in this order):

a function that gets called when the cancel is clicked
a function that gets called when ok is clicked
the actual question

This class, when instantiated, should display, or inject, the HTML skeleton in the DOM and at the same time replace the {{}} variables with the actual functions/string.

You should be able to have a "dispose" method to this class.

And prepare for the future: maybe you add more buttons - make it expandable. Etc.

Have fun!

_{And I hope you did not expect to actually provide the code for that, as that's not
the purpose of StackOverflow :)}

No, I just need the code, not the story without code. – Jun 20 '18 at 07:58 — , Jun 20 '18 at 07:58

score 0 · Accepted Answer · answered Jun 20 '18 at 08:47

The question you are trying to point is unclear. Using confirm function leads you to a confirmation dialog box answering ok and cancel.

Another is using a div tag for a confirmation of ok and cancel. You can change this into button.

I made some changes to your code an created a pen you can visit, and try to play around with it.

function myFunction(x) {
  if (x == "ok") {
    var conf = confirm("Are you sure You want to delete this item");

    if (conf == true) { //this block means the user clicked the "OK" in the confirmation dialog box.
      //Some statement here
      //example alert statement
      alert("Item has been successfully deleted!");
    }
  }
  if (x == "cancel") {
    var cancel = confirm("Are you sure you want to cancel");
    
    if (cancel == true) {
      alert("Item deletion has been cancelled");
    }
  }
}

<div class='mdialog' id='mdialog'>
  <div id='dgquestion'>
    <h1>Do you want to Delete this item?</h1>
  </div>
    <button onclick="myFunction('ok')">OK</button>
    <button onclick="myFunction('cancel')">CANCEL</button>
</div>

javascript: confirm functionality with my own confirm box and function

2 Answers2