javascript 将javascript确认框中的文本显示为粗体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27971075/
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
to show text in javascript confirm box as bold letters
提问by user3684675
I want to display some text in confirm box as bold letters. Please find the fiddle : http://jsfiddle.net/LdmgeLsv/Below is the code:
我想在确认框中显示一些文本为粗体字母。请找到小提琴：http: //jsfiddle.net/LdmgeLsv/下面是代码：
<script>
function test(){
var msg = "Please click OK to proceed, Cancel to exit..";
if(confirm(msg)){
alert("clicked OK");
}
}
</script>
<input type="submit" value="submit" onclick="test()"/>
I want to dispaly OK and Cancel as bold letters in the confirm box.
我想在确认框中以粗体字母显示 OK 和 Cancel。
I knew that we cannot apply html bold or strong in javascript, is there any solution to show OK and Cancel in confirm message as bold. Please suggest.
我知道我们不能在 javascript 中应用 html 粗体或强，是否有任何解决方案可以将确认消息中的 OK 和 Cancel 显示为粗体。请建议。
回答by Joel Etherton
The JavaScript alert and confirmation dialogs are system objects. There is no influencing them directly from the source of a webpage. If you need this kind of modified display, I would recommend using a third party tool to handle dialogs of this nature through html elements. The two most popular tools I've seen are jQueryUIand Twitter Bootstrap.
JavaScript 警报和确认对话框是系统对象。没有直接从网页的来源影响他们。如果您需要这种修改后的显示，我建议使用第三方工具通过 html 元素处理这种性质的对话框。我见过的两个最流行的工具是jQueryUI和Twitter Bootstrap。
回答by pizzarob
As others have stated the style is handled by the browser but you could create your own. Heres the fiddle: http://jsfiddle.net/LdmgeLsv/5/
正如其他人所说，样式由浏览器处理，但您可以创建自己的样式。这是小提琴：http: //jsfiddle.net/LdmgeLsv/5/
and the code
和代码
<style>
.popup{
display: none;
position: absolute;
width: 400px;
height: 150px;
background: #f8f8f8;
border: 1px solid #e9e9e9;
box-shadow: 0px 0px 3px #888;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
padding: 10px;
box-sizing:border-box;
}
.popup button{
font-weight: bold;
}
</style>
<input type="submit" value="submit" onclick="test()"/>
<div class="popup">
<p id="msg">Click OK to do something cool.</p>
<button id="ok">OK</button><button id="cancel">Cancel</button>
</div>
<script>
var popup = document.querySelector('.popup');
var cancel = document.getElementById('cancel');
var ok = document.getElementById('ok');
var msg = document.getElementById('msg');
var initMsg= msg.innerHTML;
ok.addEventListener('click', function(){
msg.innerHTML = 'You Clicked Ok';
});
cancel.addEventListener('click', function(){
msg.innerHTML = initMsg;
popup.style.display = 'none';
});
function test(){
popup.style.display = 'block';
}
</script>
回答by MaxZoom
If you truly insist to have a bold text on this dialog, you can try UTF-8 fonts
如果您真的坚持在此对话框中使用粗体文本，则可以尝试使用 UTF-8 字体
function test(){
var msg = "Please click to proceed, to exit..";
if(confirm(msg)) {
alert("clicked ");
}
}
However it is not recommended to use JavaScript confirm dialog when interacting with a real user. See this link for more info https://developer.mozilla.org/en-US/docs/Web/API/window.alert
但是，不建议在与真实用户交互时使用 JavaScript 确认对话框。有关更多信息，请参阅此链接https://developer.mozilla.org/en-US/docs/Web/API/window.alert
A preferred method to go is to use Jquery UI confirm dialog (or your favorite plugin)
首选方法是使用 Jquery UI 确认对话框（或您最喜欢的插件）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
</style>
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
alert('All items deleted');
$( this ).dialog( "close" );
},
Cancel: function() {
alert('All items remained')
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p>
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
These items will be <b>permanently deleted</b> and cannot be recovered. Are you sure?
</p>
</div>
</body>
</html>
回答by Mike Manfrin
The styling of the alert box is handled by the browser itself, and cannot be changed via CSS or javascript. If you want more control over how the alert looks, you have to make an HTML element that looks like the alert box. There are a few libraries you can look at, one of which is sweetalert.js.
警报框的样式由浏览器本身处理，不能通过 CSS 或 javascript 更改。如果您想要更多地控制警报的外观，您必须制作一个看起来像警报框的 HTML 元素。您可以查看一些库，其中之一是sweetalert.js。
