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.

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.

• javascript

• 8 only GOD can help you with IE – Shurmajee Commented Dec 27, 2012 at 10:26
• This i'm afraid cannot be done. We have no control over where the browser places the alert! – techfoobar Commented Dec 27, 2012 at 10:26
• You can't position the native dialogs, I'm afraid. Have you considered using the jQuery Dialog instead? – Mario S Commented Dec 27, 2012 at 10:30

5 Answers 5

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>

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

How to customize the JavaScript prompt?

Prompts, alerts, and confirms are basic functions that each browser has its own way of displaying to the user. There's really no reason that you should want to customize these functions, either.

If you really want advanced functionality and complete customization, you'll have to make your own custom alert. You can do this in one of several ways. One out of two options that I'll suggest is creating two divs (one that fades out the rest of the page and one that appears like an alert) in Javascript and use those as a pseudo-prompt. The second is to create a new window, remove a lot of its functionality and change some HTML on the newly opened page to make it look somewhat like an alert.

I feel like the last one is really overdoing it though. If you want a prompt, they're ugly... Otherwise, you'll need to make something yourself with a positioned div and faded background.

...but i need to the same solution to work in both the browsers.

prompt (and its cousin alert) are very outdated. You have no control over their appearance or position. It's mostly best to avoid them.

Instead, you can do a popup message using an absolutely-positioned div (or any other block element), which not only gives you full control over its position, but full styling as well. If you look around, you'll find dozens of examples of doing this, and toolkits for it, there's no need to roll your own unless you really want to.

Regardless which way you end up doing it, your logic using it will have to change, because prompt is synchronous (all script on the page comes to a screeching halt and waits for the prompt), whereas modern ways of doing this are asynchronous (event-oriented). So for instance, your new code for using the popup might look like this:

function showUpdate() {

    popup("Please enter your name","", function(name) {
        if (name!=null)
        {
            x="Hello " + name + "! How are you today?";
            alert("Input : "+name); // <== I left this one alone, looks like debugging
        }
    });
}

NOTE: The method window.showModalDialog() is obsolete and is not supported in modern browsers. Please do not use it.

You cannot reposition window.alert(), but you can do so with window.showModalDialog() as described in this page: http://bytes.com/topic/javascript/answers/849283-change-position-alert-possible

https://developer.mozilla.org/en-US/docs/DOM/window.showModalDialog