Customize javascript prompt and confirmation box

Question

I am very new in HTML design. My front end is in Angular.js. In my application, some method is executed and prompts for user input. After the user input it proceeds with rest of the logic.

Currently, I am using simple confirm() or prompt(). But I need to have html template instead of typical message. I tried something like below.

var htmlStr = "<div> This is nice html with <h1>header</h1> and body content </div>";
var action = prompt(htmlStr);

It shows up as a string and not as html.

Any idea how shall convert into html? Any help/suggestions are most welcome.

http://stackoverflow.com/a/7056787/4759033 – Satej S Feb 04 '16 at 06:29 — Satej S, Feb 04 '16 at 06:29
Thanks for the link - very useful to me – user2869612 Feb 04 '16 at 08:31 — user2869612, Feb 04 '16 at 08:31

score 1 · Answer 1 · answered Feb 04 '16 at 06:28

This is not possible. The extent of modifying text in a prompt, alert, or confirm popup is limited to adding a \n character to the string to add a break line. (Might be a few other escaped characters, but no html allowed.) The style of these popups is completely up to the browser.

window.prompt()

What you can do is create a custom modal using a position:absolute or relative div styled to your liking.

score 1 · Answer 2 · answered Feb 04 '16 at 06:48

You can use sweetalert to show customize javascript prompt or confirmation box.

swal({
    title: "An input!",
    text: "Write something interesting:",
    type: "input",   showCancelButton: true,
    closeOnConfirm: false,
    animation: "slide-from-top",
    inputPlaceholder: "Write something" },
    function (inputValue) {
        if(inputValue === false) {
            return false;
        }

        if(inputValue === "") {
            swal.showInputError("You need to write something!");

            return false;
        }

        swal("Nice!", "You wrote: " + inputValue, "success");
    }
);

demo https://jsfiddle.net/szf1jgog/

document.querySelector('button').onclick = function() {
  swal({
      title: "An input!",
      text: 'Write something interesting:',
      type: 'input',
      showCancelButton: true,
      closeOnConfirm: false,
      animation: "slide-from-top",
      inputPlaceholder: "Write something",
    },
    function(inputValue) {
      if (inputValue === false) return false;

      if (inputValue === "") {
        swal.showInputError("You need to write something!");
        return false;
      }

      swal("Nice!", 'You wrote: ' + inputValue, "success");

    });
};

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<button>Alert me</button>

Thanks for the reply. Looks like it has angular wrapper as well. Will check it out. Btw instead of text can I use html template? — user2869612, Feb 04 '16 at 08:42

score 0 · Answer 3 · answered Feb 04 '16 at 06:31

Prompt method takes in only string as its parameter so, any html code you pass in will also be taken as string only. If your project is in angularjs, then I would suggest you to have a look at angular-ui Bootstrap

This has native angular directives for all the common use-cases. You can use modal to get the user input and style it as you want.

Customize javascript prompt and confirmation box

3 Answers3