Le plug-in JavaScript SweetAlert implémente les compétences cool de box_javascript d'avertissement de message

Aujourd'hui, j'aimerais vous recommander une boîte d'avertissement de message intéressante : SweetAlert ; SweetAlert est une boîte d'invite js native qui ne nécessite pas la prise en charge de jQuery et son style est similaire à celui du bootstrap. Sa boîte d'invite est non seulement belle et émouvante, mais permet également la personnalisation. Elle prend en charge la définition du titre de la boîte d'invite, du type d'invite, de l'image d'affichage du contenu, du texte du bouton de confirmation et d'annulation, de la fonction de rappel de clic, etc. Par rapport à l'alerte traditionnelle :

SweetAlert peut centrer automatiquement la page, prend en charge les environnements de bureau, les terminaux mobiles et les tablettes et est hautement personnalisable. Voyons ensuite son utilisation spécifique !

HTML

Introduisez d'abord les js et css correspondants. Ce plug-in ne nécessite pas le support du plug-in jQuery :

<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.css"/>
<script src="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.min.js"></script>

Placez ensuite 6 boutons différents :

<div class="demo_1">
基本示例：<button>点击这里</button> 
</div>
<div class="demo_2">
提示成功：<button>点击这里</button> 
</div>
<div class="demo_3">
提示失败：<button>点击这里</button> 
</div>
<div class="demo_4">
提示确认：<button>点击这里</button> 
</div>
<div class="demo_5">
定义内容：<button>点击这里</button> 
</div>
<div class="demo_6">
确认输入：<button>点击这里</button> 
</div>

JavaScript

Définir les événements js :

$(function() {
$(".demo_1 button").click(function() {
swal("这是一个信息提示框!");
});
$(".demo_2 button").click(function() {
swal("Good!", "弹出了一个操作成功的提示框", "success");
});
$(".demo_3 button").click(function() {
swal("OMG!", "弹出了一个错误提示框", "error");
});
$(".demo_4 button").click(function() {
swal({
title: "您确定要删除吗？",
text: "您确定要删除这条数据？",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "是的，我要删除",
confirmButtonColor: "#ec6c62"
}, function() {
$.ajax({
url: "do.php",
type: "DELETE"
}).done(function(data) {
swal("操作成功!", "已成功删除数据！", "success");
}).error(function(data) {
swal("OMG", "删除操作失败了!", "error");
});
});
});

$(".demo_5 button").click(function() {
swal({
title: "Good!",
text: '自定义<span style="color:red">图片</span>、<a href="#">HTML内容</a>。<br/>5秒后自动关闭。',
imageUrl: "images/thumbs-up.jpg",
html: true,
timer: 5000,
showConfirmButton: false
});
});

$(".demo_6 button").click(function() {
swal({
title: "输入框来了",
text: "这里可以输入并确认:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "填点东西到这里面吧"
}, function(inputValue) {
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("请输入!");
return false
}
swal("棒极了!", "您填写的是: " + inputValue, "success");
});
});
});