sweetalert完整例子

最新推荐文章于 2024-06-30 17:51:59 发布

睿智的海鸥

最新推荐文章于 2024-06-30 17:51:59 发布

阅读量882

点赞数 19

文章标签： html css javascript

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140057618

版权

以下是几种sweet other的弹窗的图片代码在图片最后面给个赞，给个关注吧

一般弹窗

正确

错误

信息

警告

自定义图片

输入

以下是完整例子的源代码，这段代码在干什么可以看我用粗体加重的注释

<!DOCTYPE html>
<html>
<head>
<title>SweetAlert Examples</title>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>

<h2>SweetAlert Examples</h2>


<button οnclick="basicAlert()">Basic Alert</button>
<script>
function basicAlert() {
swal("Hello, world!");
}
</script>


<button οnclick="successMessage()">Success Message</button>
<script>
function successMessage() {
swal("Good job!", "You clicked the button!", "success");
}
</script>


<button οnclick="errorMessage()">Error Message</button>
<script>
function errorMessage() {
swal("Oops...", "Something went wrong!", "error");
}
</script>


<button οnclick="infoMessage()">Info Message</button>
<script>
function infoMessage() {
swal("Just a moment!", "Loading your order...", "info");
}
</script>


<button οnclick="warningConfirmation()">Warning Confirmation</button>
<script>
function warningConfirmation() {
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
}
</script>


<button οnclick="customIcon()">Custom Icon</button>
<script>
function customIcon() {
swal({
title: "Nice!",
text: "Here's a custom image.",
icon: "https://unsplash.it/200/300",
timer: 2000,
});
}
</script>


<button οnclick="inputField()">Input Field</button>
<script>
function inputField() {
swal({
content: {
element: "input",
attributes: {
placeholder: "Type your username",
type: "text",
},
},
button: {
text: "Submit",
closeModal: false,
},
})
.then((value) => {
if (value) {
swal(`Username: ${value}`);
} else {
swal("Cancelled");
}
});
}
</script>