使用sweetalert2自举4

我使用sweetAlert2，我试图用引导4样式按钮，设置属性：使用sweetalert2自举4

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

它的工作原理，但是被显示在一个非常的showLoaderOnConfirm选项丑陋的风格，当我设置上述属性。

您可以查看下面的例子：

重现步骤：

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

$(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 === '[email protected]') { 
 
       reject('This email is already taken.') 
 
      } else { 
 
       resolve() 
 
      } 
 
      }, 2000) 
 
     }) 
 
     }, 
 
     allowOutsideClick: false 
 
    }).then(function(email) { 
 
     swal({ 
 
     type: 'success', 
 
     title: 'Ajax request finished!', 
 
     html: 'Submitted email: ' + email 
 
     }) 
 
    }).catch(swal.noop) 
 
    }); 
 

 
    $('#button1').click(() => { 
 
    swal({ 
 
     title: 'Submit email to run ajax request', 
 
     input: 'email', 
 
     showCancelButton: true, 
 
     confirmButtonText: 'Submit', 
 
     showLoaderOnConfirm: true, 
 
     preConfirm: function(email) { 
 
     return new Promise(function(resolve, reject) { 
 
      setTimeout(function() { 
 
      if (email === '[email protected]') { 
 
       reject('This email is already taken.') 
 
      } else { 
 
       resolve() 
 
      } 
 
      }, 2000) 
 
     }) 
 
     }, 
 
     allowOutsideClick: false 
 
    }).then(function(email) { 
 
     swal({ 
 
     type: 'success', 
 
     title: 'Ajax request finished!', 
 
     html: 'Submitted email: ' + email 
 
     }) 
 
    }).catch(swal.noop) 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.2/sweetalert2.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.2/sweetalert2.min.css" /> 
 
</head> 
 

 
<body> 
 
    <button id="button">Show (Bootstrap)</button> 
 
    <hr /> 
 
    <button id="button1">Show (w/o bootstrap)</button> 
 
</body> 
 

 
</html>

的问题是：我怎样才能让对（使用BS4）加载默认的风格？或者，也许自定义样式为showLoaderOnConfirm选项...

来源

2017-02-17 dev_054

不幸的是，目前没有很好的方法来做到这一点。我们正在努力就可以了，如果你想跟踪进度订阅https://github.com/limonte/sweetalert2/issues/410

现在，您可以覆盖默认微调造型是这样的：

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 === '[email protected]') { 
 
      reject('This email is already taken.') 
 
     } else { 
 
      resolve() 
 
     } 
 
     }, 200000) 
 
    }) 
 
    }, 
 
    allowOutsideClick: false 
 
}).then(function(email) { 
 
    swal({ 
 
    type: 'success', 
 
    title: 'Ajax request finished!', 
 
    html: 'Submitted email: ' + email 
 
    }) 
 
}).catch(swal.noop)

.swal2-loading::after { 
 
    width: 20px !important; 
 
    height: 20px !important; 
 
    border-left-color: #fff !important; 
 
    border-top-color: #fff !important; 
 
    border-bottom-color: #fff !important; 
 
}

<link href="https://cdn.jsdelivr.net/sweetalert2/6.4.1/sweetalert2.css" rel="stylesheet"/> 
 
<script src="https://cdn.jsdelivr.net/sweetalert2/6.4.1/sweetalert2.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

来源

2017-02-17 07:42:41

感谢您的回答:) –

-1

喜欢你用来设置`

ButtonStyling假

`使用相同的设置

LoaderStyling：假

它将禁用加载程序，然后使用自己的风格。

来源

2017-02-17 07:05:16

如果唐模态不显示，只需添加到您的CSS：

<style> 
    .swal2-container.fade { 
     opacity: 1 
    } 
</style>

来源

2017-09-01 15:50:12

使用sweetalert2自举4

回答

相关问题