Javascript SweetAlert - 改变模态宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34520569/
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
SweetAlert - Change Modal Width?
提问by Watercayman
I love this library. I'd like to use it to display a moderate response table on one of my web pages, but the text gets a little wide. I was hoping there was an option to change the width of the overall alert for the page that I'm displaying the table within SweetAlert, but I'm not having any luck. Table & HTML look great, just too much info for the modal.
我喜欢这个图书馆。我想用它在我的一个网页上显示一个适度的响应表，但文本有点宽。我希望有一个选项可以更改我在 SweetAlert 中显示表格的页面的整体警报宽度，但我没有任何运气。表格和 HTML 看起来很棒，只是模态的信息太多了。
I can't even find where the width is set in the overall sweetalert.css.
我什至找不到在整个sweetalert.css 中设置宽度的位置。
I thought maybe the customClass configuation key might help and I tried:
我想也许 customClass 配置键可能会有所帮助，我试过：
swal({
title: priorityLevel +' Issues for '+appName,
html: appHTML,
type: "info",
customClass: 'swal-wide',
showCancelButton: true,
showConfirmButton:false
});
The css was just a simple:
css只是一个简单的：
.swal-wide{
width:850px;
}
This didn't do anything. Anyone have an idea of how to do this or perhaps have played around with the width element?
这没有任何作用。任何人都知道如何做到这一点，或者可能已经玩过宽度元素？
Thank you!
谢谢！
回答by Joel R Michaliszen
try to put !importantlike this in the css:
尝试将!important这样的放在 css 中：
.swal-wide{
width:850px !important;
}
See it working in the snippet.
看到它在代码片段中工作。
function TestSweetAlert(){
swal({
title: 1 +' Issues for test',
text: "A custom <span style='color:red;'>html</span> message.",
html: true,
type: "info",
customClass: 'swal-wide',
showCancelButton: true,
showConfirmButton:false
});
};
$('#testeSWAL').on("click",TestSweetAlert);.swal-wide{
width:850px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<button id="testeSWAL"> Test SWAL </button>Note: maybe you will have problems with the position.
注意：也许你会遇到这个职位的问题。
回答by CONvid19
On the most recent versions you can use:
在最新版本中，您可以使用：
width: '800px'
width: '800px'
i.e.:
IE：
swal({
title: "Some Title",
html: "<b>Your HTML</b>",
width: '800px'
})
回答by Buksy
Rather than overwriting default .sweet-alertcss class you can define your own
.sweet-alert您可以定义自己的 css 类，而不是覆盖默认的css 类
.sweet-alert.sweetalert-lg { width: 600px; }
Than simply use sweetalert options to set your class only to those alerts you want to be wide:
而不是简单地使用 sweetalert 选项将您的类设置为您想要广泛的警报：
swal({
title: "test",
text: "Am I wide?",
customClass: 'sweetalert-lg'
});
PS (update): You may need to change sweetalert class a little to center it properly:
PS（更新）：您可能需要稍微更改 sweetalert 类以使其正确居中：
.sweet-alert { margin: auto; transform: translateX(-50%); }
Here is jsbinto try it out
这里是 jsbin来试试看
回答by infografnet
Better use SweetAlert2which is a successor of SweetAlert. Just add "width" property, like:
最好使用SweetAlert2，它是SweetAlert的继承者。只需添加“宽度”属性，例如：
swal({
title: priorityLevel +' Issues for '+appName,
html: appHTML,
type: "info",
customClass: 'swal-wide',
showCancelButton: true,
showConfirmButton:false,
width: '850px'
});
回答by icynets
A simple solution is to add the below CSS. reference: Sweet alert 2 modal shows too small
一个简单的解决方案是添加以下 CSS。参考：Sweet alert 2 modal 显示太小
.swal2-popup { font-size: 1.6rem !important; }
回答by Jnr
None of the answers here worked for me. All I had to do was add the width value as an integer (without strings) and remove the 'px' suffix.
这里没有一个答案对我有用。我所要做的就是将宽度值添加为整数（不带字符串）并删除“px”后缀。
swal({
width: 400,
html: data,
showCancelButton: true,
showConfirmButton:false,
cancelButtonText: "Close",
});
回答by Lurai
The class name for SweetAlert modal is sweet-alert. So, if you want to change its width, the correct CSS code is:
SweetAlert 模态的类名是 sweet-alert。所以，如果你想改变它的宽度，正确的 CSS 代码是：
.sweet-alert {
width: 850px;
}
This is working with SweetAlert 1.1.3
这适用于 SweetAlert 1.1.3
回答by Gelberth Amarillo Rojas
Also you can add to the HTML head the Style:
您也可以将样式添加到 HTML 头：
.swal-modal {
width: 1000px;
}
This work for me. Hope this helps
这对我有用。希望这可以帮助
回答by Mohammed Adil
Tried Everything , none Worked. The Only Thing which worked for me was to add a classname instead of custom class
In your js
在你的js中
swal({
title : "More Data",
className: "myClass"
});
In Your Css
在你的 CSS 中
.myClass{
width:600px;
height:auto;
}
