SweetAlert2

Question

我刚从使用 SweetAlert 更改为 SweetAlert 2。花了一些时间才弄明白，但我实现了我想要的，除了一件事。

一旦我打开模式，如果有 1 个按钮但没有输入等，按钮会像这样突出显示：

有没有办法在按钮进行任何交互之前阻止它突出显示？

更新：

Answer 1

请在下面的代码片段中找到，在打开 Sweetalert 之前，有一个函数将被调用，您可以在那里做一些您需要的事情，比如停止突出显示按钮或其他东西。

有关更多信息和更多事件，如 OnClose 等。请找到此 Link 并找到 CONFIGURATION 部分

希望对你有所帮助

swal({
  title: 'Alert!',
  text: 'Heyyyyyyyyyyyyyy',
  onOpen:OnOpenFunction(),
  confirmButtonClass:"btn-disable",
  buttonsStyling:true
})

function OnOpenFunction()
{
     //Stop Highlighting your button etc..
  //alert("On Before Open Model Event!!!!!");
}

.btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;
        outline: none;
        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/sweetalert2/6.3.2/sweetalert2.min.js"></script>
<link href="https://cdn.jsdelivr.net/sweetalert2/6.3.2/sweetalert2.min.css" rel="stylesheet"/>

Answer 2

只需将此代码添加到您的 css

button.swal2-styled {
    outline: none;
}

Answer 3

@Badal 提到的解决方案有效，但它依赖于内部插件 classes，这很糟糕。

更好的解决方案是使用 confirmButtonClass 选项：

.no-outline {
  outline: none;
}

然后将 class 传递给 confirmButtonClass 选项：

swal({
  ...
  confirmButtonClass: 'no-outline',
  ...
})

SweetAlert2 - 如果是一个按钮，它会在模态打开后立即突出显示

SweetAlert2 - if one button, it gets highlighted as soon as modal opens

javascript

jquery

sweetalert