在javascript中定位提示弹出窗口

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>

它工作找到excepts提示转到左角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>