Custom JS Prompt Popup

Question

I'm looking for a way to customise the JS prompt popup so that I can give the user the options that I want them to have -

1. Change - Take the value from the prompt box and change the value that was checked to initiate the prompt in the first place.
2. Continue - Don't care, continue with the original value.
3. Cancel - Forget this, just get rid of the box.

Options 1 & 3 are available by default (albeit with option 1 being called 'Ok'), but I am unaware of a way to manipulate the prompt to offer a 3rd option.

I'm guessing that this cannot be done through JS, so are there any jQuery plugins that may help me? Thanks.

Answer 1

try,

  $( function() {
    $( "#dialog" ).dialog();
  } );

.but{
    width: 33%;
    float: left;
    text-align:center;
}
input{width: 100%;}

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


 
<div id="dialog" title="Basic dialog">
  <p>Enter any text</p>
  <input type="text" /><br><br>
  <div>
    <div class="but butt1"><button>Change</button></div>
    <div class="but butt2"><button>Continue </button></div>
    <div class="but butt3"><button>Cancel </button></div>
  </div>
</div>
 

Answer 2

https://github.com/bmmage/customAlert

jquery plugin that allows for customization of Alert windows and slide down alert boxes.

Answer 3

You're right, you can't customize the browser's prompt box: Here is a jquery ui plugin that will help you make modal windows:

http://docs.jquery.com/UI/Dialog/dialog#options

You might also use and customize (extend) this:

http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

Answer 4

Check this plugin, i think you can change everything u need: jAlert

Answer 5

jQuery UI has a dialog component that can be used for this.

If you're looking for a less bloated solution, a Google Search comes up with many reusable results.