Question

我有一个像下面这样的javascript提示，我想带上屏幕的提示中心。如何使用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 );          
    }

}

这就是我所说的：

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

它可以找到例外情况，提示会转到IE的左下角，并以Firefox为中心但我需要在两种浏览器中使用相同的解决方案。

Answer 1

prompt（和alert）弹出窗口的实现方式会有所不同，具体取决于您使用的浏览器。这是因为弹出窗口是浏览器功能，它们不是JavaScript对象或类似的东西。（就像每个浏览器的控制台不同，它取决于实现。）

如果你真的想要一致地定位/设置你的提示，你将不得不建立自己的提示。

最简单的方法是使用像 jQueryUI这样的库。

另一方面，您可以自己构建它：

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

您无法自定义或定位默认的javascript提示。请查看此SO答案以获取解决方法。

How to customize the JavaScript prompt?

Answer 3

...但我需要在两种浏览器中使用相同的解决方案。

prompt（及其堂兄alert）已经过时了。你无法控制他们的外表或位置。最好避免它们。

相反，您可以使用绝对定位的div（或任何其他块元素）来执行弹出消息，这不仅可以让您完全控制其位置，还可以完全控制样式。如果你环顾四周，你会发现很多这样做的例子，以及它的工具包，除非你真的想要，否则你不需要自己动手。

无论你最终采用哪种方式，你使用它的逻辑都必须改变，因为prompt是同步的（页面上的所有脚本都会暂停并等待提示），而现代方式这样做是异步的（面向事件）。因此，例如，使用弹出窗口的新代码可能如下所示：

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
        }
    });
}

Answer 4

提示，警报和确认是每个浏览器都有自己的方式向用户显示的基本功能。你也不应该想要自定义这些功能。

如果您真的想要高级功能并完成自定义，则必须自行制作自定义提醒。您可以通过以下几种方式之一完成此操作。我建议的两个选项中有一个是在Javascript中创建两个div（一个淡出页面的其余部分，另一个看起来像一个警报），并将它们用作伪提示。第二个是创建一个新窗口，删除它的许多功能，并在新打开的页面上更改一些HTML，使其看起来有点像警报。

我觉得最后一个真的过度了。如果你想要一个提示，那就太丑了......否则，你需要用自己定位的div和褪色的背景制作一些东西。

Answer 5

注意：方法window.showModalDialog()已过时，而不是现代浏览器支持。请不要使用。

您无法重新定位window.alert()，但您可以使用此页面中所述的window.showModalDialog()进行重新定位：http://bytes.com/topic/javascript/answers/849283-change-position-alert-possible

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

在javascript中定位提示弹出窗口

5 个答案: