SweetAlert - 改变模态宽度？

Question

我喜欢这个图书馆.我想用它在我的一个网页上显示一个温和的响应表,但文本有点宽.我希望有一个选项来改变我在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;
}

这没有做任何事情.任何人都知道如何做到这一点,或者可能已经玩过宽度元素？

谢谢!

Answer 1

试着把这样的东西放在!importantcss中:

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

看到它在片段中工作.

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>

注意:也许你会遇到这个职位的问题.

Answer 2

使用width: '800px',即:

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

Sweet Alert2文件

Answer 3

.sweet-alert您可以定义自己的CSS类，而不是覆盖默认的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%); }

这里有jsbin可以尝试一下

Answer 4

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

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