标签: sweetalert2

我正在使用 sweetAlert2，并尝试使用 bootstrap 4 来设置按钮样式，设置属性：

buttonsStyling: false,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg'

它有效，但是showLoaderOnConfirm当我设置上面的这些属性时，该选项以非常难看的样式显示。

您可以检查以下示例：

重现步骤：

• 输入有效的电子邮箱；
• 按提交；
• 请参阅第一个的加载程序（样式）（使用 bs4，第二个使用 swal2 的默认样式）。

buttonsStyling: false,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg'

$(function() {
  $('#button').click(() => {
    swal({
      title: 'Submit email to run ajax request',
      input: 'email',
      showCancelButton: true,
      confirmButtonText: 'Submit',
      showLoaderOnConfirm: true,
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-primary btn-lg',
      cancelButtonClass: 'btn btn-lg',
      preConfirm: function(email) {
        return new Promise(function(resolve, reject) {
          setTimeout(function() {
            if (email === 'taken@example.com') …

我正在尝试对表单中的一个字段执行验证。

只有当该字段的值存在时，我才能调用 API，否则将抛出错误消息。

我尝试了 SweetAlert2 网站上的各种示例。我只想要对其中一个字段的验证。

Swal.fire({
        title: 'Are you sure you want to Save the Notes?',
        type: 'info',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes'
      }).then((result) => {

      console.log('result.value',result.value);
        if (result.value) {
          Swal.fire( {
            title: 'Download Notes',
              html:"<div class='b'><p>ID</p></div><input id='swal-input2' class='swal2-input' required/><div class='b'><p>Notes</p></div><input id='swal-input1' class='swal2-input' autofocus minlength='500' >",
            confirmButtonText: 'Save',
            preConfirm: (login) => {
              console.log('document.getElementById(swal-input2).value',document.getElementById('swal-input2').value);
              request_string = {
        "Request":
          [
            {
              "Col1": "value1",
              "Col1": "value2",
              "Col1": document.getElementById('swal-input2').value,
              "Col1": document.getElementById('swal-input1').value,

            }
          ]
      };
             fetch('API_URL', {
        headers: {
          'Accept': 'application/json, …

在9.0.0版本之前，我使用此代码完全禁用Toast警报上的动画。

Swal.fire({
    animation : false,
    toast: true,
    ....
});

现在使用版本 9.* 我尝试使用此代码，结果看起来相同

Swal.fire({
    showClass : { popup : "swal2-noanimation", backdrop : "swal2-noanimation", icon : "swal2-noanimation"},
    //hideClass : { popup : "swal2-noanimation", backdrop : "swal2-noanimation", icon : "swal2-noanimation"},
    toast: true,
    ....
});

如果我还启用了属性hideClass，我将无法使用Swal.close()方法隐藏警报。

那么获得与之前相同的效果的正确解决方案是什么？

我已经阅读了有关https://github.com/Atrox/sweetify-django的文档，但我不太明白，我已经在 Django 中下载并导入了 sweetify 的要求。我只是希望如果记录被更新，就会出现弹出消息（sweetify） 。

def studentrecords(request):\n   if request.method == \'POST\':\n      id = request.POST.get("id")\n      update = StudentsEnrollmentRecord.objects.get(id=id)\n      update.Section = s\n      update.save()\n      sweetify.success(request, \'You did it\', text=\'Your Form has been Updated\',persistent=\'Hell yeah\')\n      return render(request, \'Homepage/selectrecord.html\')\n

这是我的html

{% load sweetify %}\n{% sweetify %}\n <form  method="post" action="/studentrecords/" enctype="multipart/form-data">{% csrf_token %}\n<table>\n    {% for student in myrecord %}\n    <tr>\n        <td>Control #</td>\n        <td><input type="text" name="id" value="{{student.id}}"></td>\n        <td><input type="submit"></td>\n    </tr>\n    <tr>\n        <td>Name: </td>\n        <td><input type="text" value="{{student.Student_Users.Firstname}} {{student.Student_Users.Lastname}} {{student.Student_Users.Middle_Initial}}"></td>\n        <td>Course/Track</td>\n        <td><input type="text" …

问题

我正在使用SweetAlert2，打开一个带有自定义 HTML 的警报，其中显示了一些输入框。我想使用 SweetAlert2 中的普通确认/取消按钮将这些输入的值发送到套接字。

题

如何使用普通的 SweetAlert2 按钮获取这些输入的值？请不要建议使用普通输入或 HTML 按钮，因为这是一种解决方法，我不希望那样。

环境

我使用 jQuery、SweetAlert2 和一些不相关的库，例如 Vue.js 和 Socket.io 等。

代码

function addUser() {
    swal({
        html: `
            <div class="field">
                Email:
                <p class="control has-icons-left">
                <input class="input" type="email" placeholder="Email">
                    <span class="icon is-small is-left">
                        <i class="mdi mdi-email"></i>
                    </span>
                </p>
            </div>
            <div class="field">
                Name:
                <p class="control has-icons-left">
                    <input class="input" type="text" placeholder="Name">
                    <span class="icon is-small is-left">
                        <i class="mdi mdi-account"></i>
                    </span>
                </p>
            </div>
            <div class="field">
                Password:
                <p class="control has-icons-left">
                    <input class="input" type="text" placeholder="Password">
                    <span …

我想用Sweet Alert2制作一个多输入弹出窗口，这些输入字段之一应该是带有多个选项的选择。我在某些页面中尝试了 select2 multiple，如本例所示：

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">  
    <option value="AL">Alabama</option>
 ...<option value="WY">Wyoming</option> 
</select>

使用插件：

$(document).ready(function() {
   $('.js-example-basic-multiple').select2(); 
});

我尝试在甜蜜警报配置的自定义html描述中插入HTML代码，但没有效果。可以在swal2 中插入 select2吗？谢谢

我最近在我的项目中与 SweetAlert2 合作，我想组合一个“添加注释”功能。

用户单击一个按钮，被定向到一个页面，然后执行以下操作。

    <script>swal({
      title: "Add Note",
      input: "textarea",
      showCancelButton: true,
      confirmButtonColor: "#1FAB45",
      confirmButtonText: "Save",
      cancelButtonText: "Cancel",
      buttonsStyling: true
    }).then(function () {
      swal(
        "Sccess!",
        "Your note has been saved!",
        "success"
      )
    }, function (dismiss) {
      if (dismiss === "cancel") {
        swal(
          "Cancelled",
"Canceled Note",
          "error"
        )
      }
    })</script>

我想要完成的，并且有一个困难的时间是利用 ajax 从输入字段“textarea”发布数据。

我还想通过使用以下内容来验证提交是成功还是失败

'成功'

swal(
        "Sccess!",
        "Your note has been saved!",
        "success"
      )

“失败的”

swal(
          "Internal Error",
          "Oops, your note was not saved."
          "error"
        )

我还需要将一个 PHP 对象传递给 ajax（一个唯一的客户 ID …

我最近将 Sweet Alert 1 移至 Sweet Alert 2，但根据文档，没有选项可以对像 Sweet Alert 1 这样的警报框的覆盖背景进行主题化

.swal-overlay {
  background-color: rgba(43, 165, 137, 0.45);
}.

请问如何实现更改Sweet Alert 2的叠加背景？

抱歉，如果我在文档中遗漏了某些内容，但我无法找到阻止在 SweetAlert 2 中关闭对话框的方法，这些将不起作用：

        await Swal.fire({
            html: diagHtml,
            showCancelButton: true,

            willClose: (el) => {
                console.log(el);

                if (someLogic()) {
                    event.preventDefault();
                    return false;
                }
            },
        });

有没有办法让对话框保持不变，最好是使用async？

我定义了一个 className 来自定义 sweetAlert2，但显然该样式不适用于 sweet 警报。我把班级名称称为一切，但似乎没有任何作用。问题可能出在这个包的主 css 文件上吗？

swal.fire({
   title: Welcome,
   className: styleTitle
});

CSS

.styleTitle{
   font-size: 25px;
}