在javascript中定位提示窗口

positioning the prompt popup in javascript

本文关键字：提示窗口 定位 javascript      更新时间：2023-09-26

我有一个像下面这样的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中移到中间但我需要相同的解决方案，在两个浏览器的工作。

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>

您不能自定义或定位默认的javascript提示符。查看这个SO答案以找到解决方法。

如何定制JavaScript提示符?

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

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

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

…但我需要相同的解决方案，在两个浏览器的工作。

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

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

相关文章：