【问题标题】：SweetAlert - Change Modal Width?SweetAlert - 改变模态宽度？
【发布时间】：2022-02-23 05:38:31
【问题描述】：

我喜欢这个图书馆。我想用它在我的一个网页上显示一个适度的响应表，但是文本有点宽。我希望有一个选项可以更改我在 SweetAlert 中显示表格的页面的整体警报宽度，但我没有运气。表格和 HTML 看起来很棒，只是模式信息太多了。

我什至找不到在整体 sweetalert.css 中设置宽度的位置。

我想也许 customClass 配置键可能会有所帮助，我尝试了：

swal({
       title: priorityLevel +' Issues for '+appName,
       html: appHTML,
       type: "info",
       customClass: 'swal-wide',
       showCancelButton: true,
       showConfirmButton:false
   });

css 很简单：

.swal-wide{
    width:850px;
}

这并没有做任何事情。任何人都知道如何做到这一点，或者可能玩过宽度元素？

谢谢！

【问题讨论】：

标签： javascript html css sweetalert

【解决方案1】：

尝试将 !important 像这样放在 css 中：

.swal-wide{
    width:850px !important;
}

看到它在 sn-p 中工作。

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>

注意：可能你的职位会有问题。

【讨论】：

非常感谢@Joel Ramos Michaliszen。这对我不起作用，但它让我得到了答案——我的 SWAL 版本不是“真正的”版本——哈哈，sweetalert2 实际上没有我不认为的 Customclass 函数——所以它不会工作。我认为我们对真正的 SWAL 的尝试都是正确的，所以我将把答案标记为正确。我想无论如何我都会对表格使用普通的 ol Bootstrap 模态，因为它们更适合一些。再次感谢。
在 Swal 2.0 中使用 className 而不是 customClass
对于 sweetalert2 有“增长”选项：sweetalert2.github.io/v7.html 允许“行”、“列”、“全屏”或 false（默认值）。
澄清：有两个不同的包：sweetalert 和 sweetalert2。 sweetalert 现在是第 2 版，为此，请使用 className 而不是 customClass。对于 sweetalert2，您可以使用 'width' 或 'grow'。

【解决方案2】：

在您可以使用的最新版本上：

`width: '800px'`

即：

swal({
    title: "Some Title",
    html: "<b>Your HTML</b>",
    width: '800px'
})

Sweet Alert2 Docs

【讨论】：

【解决方案3】：

您可以定义自己的而不是覆盖默认的.sweet-alert css 类

.sweet-alert.sweetalert-lg { width: 600px; }

而不是简单地使用 sweetalert 选项将您的课程设置为仅包含您想要广泛的警报：

swal({
  title: "test",
  text: "Am I wide?",
  customClass: 'sweetalert-lg'
});

PS（更新）：您可能需要稍微更改 sweetalert 类以使其正确居中：

.sweet-alert { margin: auto; transform: translateX(-50%); }

Here is jsbin 试试看

【讨论】：

唯一的问题似乎是模态居中的方式没有得到正确计算。

【解决方案4】：

最好使用 SweetAlert 的继任者 SweetAlert2。只需添加“宽度”属性，例如：

swal({
   title: priorityLevel +' Issues for '+appName,
   html: appHTML,
   type: "info",
   customClass: 'swal-wide',
   showCancelButton: true,
   showConfirmButton:false,
   width: '850px'
});

【讨论】：

【解决方案5】：

一个简单的解决方案是添加以下 CSS。参考：Sweet alert 2 modal shows too small

.swal2-popup { font-size: 1.6rem !important; }

【讨论】：

【解决方案6】：

如果您使用的是 SweetAlert2，请访问https://sweetalert2.github.io/

那么对于自定义宽度，您可以使用 Swal.fire() 函数的 width 属性，例如

Swal.fire({
  title: 'Custom width',
  width: 600,
})

【讨论】：

【解决方案7】：

这里没有一个答案对我有用。我所要做的就是将宽度值添加为整数（不带字符串）并删除“px”后缀。

swal({
       width: 400,
       html: data,
       showCancelButton: true,
       showConfirmButton:false,
       cancelButtonText: "Close",
});

【讨论】：

【解决方案8】：

Tried Everything , none Worked. The Only Thing which worked for me was to add a classname instead of custom class

在你的 js 中

swal({
       title : "More Data",
       className: "myClass"
     });

在你的 CSS 中

.myClass{
            width:600px;
            height:auto;
        }

【讨论】：

【解决方案9】：

SweetAlert 模态的类名是 sweet-alert。所以，如果你想改变它的宽度，正确的 CSS 代码是：

.sweet-alert { 
       width:  850px;   
}

这适用于 SweetAlert 1.1.3

【讨论】：

【解决方案10】：

您还可以在 HTML 头部添加样式：

        .swal-modal {
        width: 1000px;
        }

这对我有用。希望这会有所帮助

【讨论】：

【解决方案11】：

swal({
  title: 'Title',
  type: 'question',
  width: '650px', /*set width container*/
  showCancelButton: true,
  showConfirmButton: true
 });

【讨论】：

你能分享一些细节吗？

【解决方案12】：

不是答案，但我希望我能帮助别人。在我的情况下，由于我的主题风格，模态看起来很小。所以将这个固定的矿井添加到默认大小。

.swal2-popup {
  font-size: 1.6rem !important;
}

【讨论】：

【解决方案13】：

这些都不适合我。 "sweetalert2": "^11.2.0"

尝试自定义类
直接宽度属性（有效但需要不可用的最大宽度）
类名也不适合我

最后不得不使用开发工具，检查元素并对类进行必要的更改。以下是最近警报框的一些更改。

.swal2-popup {
  max-height: 300px !important;
  max-width: 300px !important;
}
.swal2-icon {
  font-size: 13px !important;
}

.swal2-text {
  max-height: 70px;
}

.swal2-confirm {
  background: #3aa9a9 !important;
}

如果不起作用，请在新标签页中打开

【讨论】：

【解决方案14】：

虽然这里的大多数答案都有效，但我想加两分钱。（适用于：Sweetalert2）

我们不应该使用固定大小，比如width: 500/600/800，因为它在较小的设备上可能看起来很难看。我宁愿建议使用百分比，这样无论您在哪种设备屏幕尺寸上使用它，它都会表现一致。

假设我们要显示一个不超过屏幕大小 40% 的弹出窗口，那么我们可以像下面这样使用它：

Swal.fire({
  title: 'Consistent width',
  width: '40%',
})

如果我们在整个项目的所有弹出窗口中使用相同的约定，我们将看到一致的Sweet alerts。

【讨论】：