Javascript 在javascript中定位提示弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14053028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
positioning the prompt popup in javascript
提问by Java Questions
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?
我有一个像下面这样的 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 );
}
}
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 IEand center in Firefoxbut i need to the same solution to work in both the browsers.
它可以找到，但提示转到左角IE并居中，Firefox但我需要相同的解决方案才能在两个浏览器中工作。
采纳答案by Cerbrus
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.)
在prompt（和alert）弹出窗口取决于您使用的浏览器上实现不同。这是因为弹出窗口是浏览器功能，它们不是 JavaScript 对象或类似的东西。（就像每个浏览器的控制台不同一样，这取决于实现。）
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.
最简单的方法是使用像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>回答by ryadavilli
You cannot customize or postion the default javascript prompt. Check this SO answer for workarounds.
您不能自定义或放置默认的 javascript 提示。检查此 SO 答案以获取解决方法。
回答by T.J. Crowder
...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.
prompt（及其表亲alert）非常过时。您无法控制它们的外观或位置。大多数情况下最好避免它们。
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.
相反，您可以使用绝对定位div（或任何其他块元素）来执行弹出消息，这不仅可以让您完全控制其位置，还可以完全控制样式。如果你环顾四周，你会发现很多这样做的例子，以及它的工具包，除非你真的想要，否则没有必要自己动手。
Regardless which way you end up doing it, your logic using it will have to change, because promptis 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 usingthe popup might look like this:
无论您最终采用哪种方式，您使用它的逻辑都必须改变，因为它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
}
});
}
回答by jeremy
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.
如果您真的想要高级功能和完全自定义，则必须制作自己的自定义警报。您可以通过多种方式之一执行此操作。我建议的两个选项之一是在 Javascript 中创建两个 div（一个淡出页面的其余部分，一个看起来像警报）并将它们用作伪提示。第二个是创建一个新窗口，删除它的很多功能，并在新打开的页面上更改一些 HTML，使其看起来有点像警报。
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.
不过我觉得最后一个真的做得太过分了。如果你想要一个提示，它们很难看……否则，你需要自己制作一些带有定位 div 和褪色背景的东西。
回答by techfoobar
NOTE: The method
window.showModalDialog()is obsolete and is not supported in modern browsers. Please do not use it.
注意：该方法
window.showModalDialog()已过时，现代浏览器不支持。请不要使用它。
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
您不能重新定位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
https://developer.mozilla.org/en-US/docs/DOM/window.showModalDialog
