5

我有一个类似下面的 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 但我需要相同的解决方案才能在两个浏览器中工作。

4

5 回答 5

4

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>

于 2012-12-27T10:41:15.847 回答
2

您不能自定义或发布默认的 javascript 提示。检查此 SO 答案以了解解决方法。

如何自定义 JavaScript 提示？

于 2012-12-27T10:27:34.227 回答
2

...但我需要相同的解决方案才能在两种浏览器中工作。

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
        }
    });
}
于 2012-12-27T10:27:42.640 回答
2

提示、警报和确认是每个浏览器都有自己的向用户显示方式的基本功能。您也没有理由要自定义这些功能。

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

我觉得最后一个真的是过度了。如果你想要一个提示，它们很丑……否则，你需要自己制作一些带有定位 div 和褪色背景的东西。

于 2012-12-27T10:27:55.270 回答
2

注意：该方法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

于 2012-12-27T10:29:48.997 回答