Javascript 一个非常简单的带有 css 的警报和确认框样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26962032/
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
A very simple Alert and Confirm Box style with css
提问by TLSK
I have the follow simple code for a confirm box
我有一个确认框的以下简单代码
<!DOCTYPE html>
<html>
<body>
<p>Click the button to alert the hostname of the current URL.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
confirm("Confirm!!!!");
}
</script>
</body>
</html>
but my problem is I want with css to style the OK and Cancel button with a very simple way. I'm looking for a real simple solution.
但我的问题是我想用 css 以一种非常简单的方式来设置 OK 和 Cancel 按钮的样式。我正在寻找一个真正简单的解决方案。
采纳答案by Kevin Nelson
alertand confirmare built-in to JavaScript and STOP page execution until they are answered, which is what allows you to do:
alert并confirm内置于 JavaScript 并停止页面执行，直到它们被回答，这允许您执行以下操作：
if( confirm('do you want to see this?') ) {
//show them.
}
Any confirm() solution that you work-up that can be styled won't be able to be included in an ifstatement. If you want code to only execute when the confirmis clicked, then you need to make that code as a callback, which make the above code look more like this:
您处理的任何可以设置样式的 confirm() 解决方案都不能包含在if语句中。如果你希望代码只在confirm被点击时执行，那么你需要将该代码作为回调，这使得上面的代码看起来更像这样：
mySpecialConfirm('do you want to see this?', function() {
//show them
} );
Then, you have to wire that function call into the "ok" button click on the confirm dialog that you create. This means that it's inherently more complicated just from a coding standpoint not to mention the code that has to wire that up to an HTML form. I would say that it's not worth it to re-invent the wheel and make your own modal. This means that you need to choose jQuery and jQuery UI, or jQuery and Bootstrap, or Dojo Toolkit, etc., and then from there look for the solution that they have for doing this, or use their modals.
然后，您必须将该函数调用连接到“确定”按钮中，单击您创建的确认对话框。这意味着仅从编码的角度来看，它本质上更复杂，更不用说必须将其连接到 HTML 表单的代码。我会说重新发明轮子并制作自己的模态是不值得的。这意味着您需要选择 jQuery 和 jQuery UI，或 jQuery 和 Bootstrap，或 Dojo Toolkit 等，然后从那里寻找解决方案，或者使用他们的模式。
回答by Matthijs van Hest
This question has been asked more:
这个问题问得比较多：
Answer; you can NOT style the confirm()function it's dialog box since it's browser generic.
回答; 由于它是浏览器通用的，因此您无法设置其对话框中的 confirm()函数的样式。
You will have to search for alternatives like these:
您将不得不寻找以下替代方案：
- jQuery Boxy: onehackoranother.com/projects/jquery/boxy/
- jQuery Dialog: jqueryui.com/dialog/#modal-confirmation
- jQuery Boxy：onehackoranother.com/projects/jquery/boxy/
- jQuery 对话框：jqueryui.com/dialog/#modal-confirmation
You could also try to create your own dialog box. Which is not quite simple as you asked for. However, lot's of tutorials can be found:
您也可以尝试创建自己的对话框。这并不像您要求的那样简单。但是，可以找到很多教程：
- Tutorial 1:www.developphp.com/view.php?tid=1385
- Tutorial 2:tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
- 教程一：www.developphp.com/view.php?tid=1385
- 教程 2：tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
(Sorry, as a beginner I'm not allowed to place more links)
（对不起，作为初学者，我不允许放置更多链接）
回答by gilbert-v
As far as I know, you can't change the style of native pop up windows, but you can create your own with a bit of JavaScript trickery.
据我所知，您无法更改本机弹出窗口的样式，但您可以使用一些 JavaScript 技巧创建自己的弹出窗口。
function promptWindow() {
// Create template
var box = document.createElement("div");
var cancel = document.createElement("button");
cancel.innerHTML = "Cancel";
cancel.onclick = function() { document.body.removeChild(this.parentNode) }
var text = document.createTextNode("Please enter a message!");
var input = document.createElement("textarea");
box.appendChild(text);
box.appendChild(input);
box.appendChild(cancel);
// Style box
box.style.position = "absolute";
box.style.width = "400px";
box.style.height = "300px";
// Center box.
box.style.left = (window.innerWidth / 2) -100;
box.style.top = "100px";
// Append box to body
document.body.appendChild(box);
}
After calling promptWindowyou have your own pop up box, which you are free to style!
致电后，promptWindow您将拥有自己的弹出框，您可以随意设置样式！
Hope this helped!
希望这有帮助！
