positioning the prompt popup in javascript

Question

i have a javascript prompt like the following and i would like to bring the prompt center of the screen. How to do this in using javascript?

function showUpdate() {     
    var x;    
    var name=prompt("Please enter your name","");

    if ( name != null ) {
      x="Hello " + name + "! How are you today?";
      alert("Input : " + name );          
    }

}

And this is how i call this :

<a onclick = "showUpdate() " style="vertical-align: middle;" class="parent" href=""><span>5. Missed P/U Comments</span></a>

it works find excepts the prompt goes to the left corner in IE and center in Firefox but i need to the same solution to work in both the browsers.

Answer 1

The prompt (and alert) popups are implemented differently depending on the browser you're using. This is because the popups are browser functionalities, they aren't JavaScript objects or anything like that. (Just like the console is different for each browser, it depends on the implementation.)

If you really want your prompts to be positioned / styled consistently, you're going to have to build your own prompt.

The easy way out would be to use a library like jQueryUI.

On the other hand, you can just build it yourself:

document.getElementById('showPromptButton').addEventListener('click', showSprompt);
document.getElementById('promptButton').addEventListener('click', submitPrompt);
var prompt = document.getElementById('myPrompt');
var promptAnswer = document.getElementById('promptAnswer');

function showSprompt() {
    promptAnswer.value = ''; // Reset the prompt's answer
    document.getElementById('promptQuestion').innerText = "What's your question?"; // set the prompt's question
    prompt.style.display = 'block'; // Show the prompt
}

function submitPrompt() {
    var answer = promptAnswer.value; // Get the answer
    prompt.style.display = 'none';   // Hide the prompt
    console.log(answer);
}

#myPrompt{
  display:none;
  /* Style your prompt here. */
}

<input id="showPromptButton" type="button" value="Show Prompt" />
<div id="myPrompt" class="proptDiv">
  <span id="promptQuestion"></span>
  <input id="promptAnswer" type="text" />
  <input id="promptButton" type="button" value="Submit" />
</div>

Answer 2

You cannot customize or postion the default javascript prompt. Check this SO answer for workarounds.

How to customize the JavaScript prompt?