Question

我喜欢这个图书馆。我想用它在我的一个网页上显示一个温和的响应表，但文字有点宽。我希望有一个选项来改变我在SweetAlert中显示该表的页面的整体警报的宽度，但我没有运气。表＆amp; 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

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

.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，即：

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

Sweet Alert2 Docs

Answer 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尝试一下

Answer 4

更好地使用SweetAlert2，这是SweetAlert的继承者。只需添加“width”属性，例如：

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

Answer 5

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

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

Answer 6

SweetAlert模态的类名是甜蜜的警觉。所以，如果你想改变它的宽度，正确的CSS代码是：

.sweet-alert { 
       width:  850px;   
}

这适用于SweetAlert 1.1.3

Answer 7

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

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

Answer 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;
        }

Answer 9

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

        .swal-modal {
        width: 1000px;
        }

为我工作。希望对您有帮助

Answer 10

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

Answer 11

如果您使用的是位于 https://sweetalert2.github.io/

的 SweetAlert2

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

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

Answer 12

不是答案，但我希望我能帮助某人。就我而言，由于我的主题风格，模态看起来很小。所以把这个固定的地雷添加到默认大小。

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

SweetAlert - 改变模态宽度？

12 个答案: