<!DOCTYPE html>
<html lang="en" backgound="">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
<link href="./css/index.css" rel="stylesheet" />
</head>
<body class="bg-light">
<div class="container-fluid">
<!-- content ------------------------------------- -->
<div id="test" class="card mt-5">
<div class="card-header">
<button type="button" class="btn btn-primary" onclick="swal2.showModal()">sweetalert2 modal</button>
<button type="button" class="btn btn-primary" onclick="swal2.confirmMsg()">sweetalert2 confirm msg</button>
<button type="button" class="btn btn-primary" onclick="swal2.msg()">sweetalert2 msg</button>
<button type="button" class="btn btn-primary" onclick="swal2.successMsg()">sweetalert2 success msg</button>
<button type="button" class="btn btn-primary" onclick="swal2.errorMsg()">sweetalert2 error msg</button>
<button type="button" class="btn btn-primary" onclick="swal2.successMsg1()">sweetalert2 success msg</button>
<button type="button" class="btn btn-primary" onclick="swal2.errorMsg1()">sweetalert2 error msg</button>
</div>
<div class="card-header">
<button type="button" class="btn btn-primary" onclick="layer3.showModal()">layer modal</button>
<button type="button" class="btn btn-primary" onclick="layer3.confirmMsg()">layer confirm msg</button>
<button type="button" class="btn btn-primary" onclick="layer3.msg()">layer msg</button>
<button type="button" class="btn btn-primary" onclick="layer3.successMsg()">layer success msg</button>
<button type="button" class="btn btn-primary" onclick="layer3.errorMsg()">layer error msg</button>
<button type="button" class="btn btn-primary" onclick="layer3.loading()">layer loading</button>
<button type="button" class="btn btn-primary" onclick="layer3.fullScreen()">layer fullScreen</button>
</div>
<div class="card-body">
<table class="table table-bordered mt-2">
<thead>
<tr class="text-center">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>
<!-- <a herf="#" title="detail" class="detail ms-2" data-sid="1"><i class="bi bi-archive-fill"></i></a> -->
<a herf="#" title="delete" class="delete ms-2"><i class="bi bi-trash3-fill"></i></a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>
<!-- <a herf="#" title="detail" class="detail ms-2" data-sid="1"><i class="bi bi-archive-fill"></i></a> -->
<a herf="#" title="delete" class="delete ms-2"><i class="bi bi-trash3-fill"></i></a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry the Bird</td>
<td></td>
<td>
<!-- <a herf="#" title="detail" class="detail ms-2" data-sid="1"><i class="bi bi-archive-fill"></i></a> -->
<a herf="#" title="delete" class="delete ms-2"><i class="bi bi-trash3-fill"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="createForm" style="display: none" class="p-4">
<form>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">name</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon2">email</span>
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">address</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">date</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" />
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
</form>
</div>
</body>
<script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.js"></script>
<script src="../public/plugins/jquery-1.9.1.js"></script>
<script src="../public/plugins/layer-v3.5.1/layer.js"></script>
<script src="../public/plugins/sweetalert2.all.min.js"></script>
<script>
const swal2 = {
showModal: function () {
Swal.fire({
html: $("#createForm").html(),
width: "95%",
backdrop: false,
showCloseButton: false,
showConfirmButton: true,
showCancelButton: true,
focusConfirm: true,
confirmButtonText: "Save",
confirmButtonColor: "#6989bf",
cancelButtonColor: "#6989bf",
}).then((result) => {
if (result.isConfirmed) {
handleSave();
Swal.fire("Saved!", "", "success");
} else if (result.isDenied) {
Swal.fire("Changes are not saved", "", "info");
}
});
},
confirmMsg: function () {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
},
msg: function () {
Swal.fire({
position: "center",
title: "msg",
showConfirmButton: false,
timer: 2000,
});
},
successMsg: function () {
Swal.fire({
position: "center",
icon: "success",
title: "Your work has been saved",
showConfirmButton: false,
timer: 2000,
});
},
errorMsg: function () {
Swal.fire({
position: "center",
icon: "error",
title: "error",
showConfirmButton: false,
timer: 2000,
});
},
successMsg1: function () {
const Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener("mouseenter", Swal.stopTimer);
toast.addEventListener("mouseleave", Swal.resumeTimer);
},
});
Toast.fire({
icon: "success",
title: "Signed in successfully",
});
},
errorMsg1: function () {
const Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener("mouseenter", Swal.stopTimer);
toast.addEventListener("mouseleave", Swal.resumeTimer);
},
});
Toast.fire({
icon: "error",
title: "error",
});
},
};
</script>
<script>
const layer3 = {
showModal: function () {
layer.open({
type: 1,
shade: false,
area: ["90%", "600px"], //宽高
btn: ["save"], //按钮
content: $("#createForm"),
success: function () {
layer.msg("opened", { icon: 1 });
},
yes: function () {
layer.msg("saved", { icon: 1 });
},
});
},
confirmMsg: function () {
layer.confirm(
"are you sure?",
{
icon: 3,
},
function () {
layer.msg("great", { time: 2000, icon: 1 });
},
function () {
layer.msg("sorry", {
time: 2000,
icon: 2,
});
}
);
},
loading: function () {
layer.load(1);
setTimeout(function () {
layer.closeAll("loading");
}, 3000);
},
msg: function () {
layer.msg("hello");
},
successMsg: function () {
layer.alert("正确", { time: 2000, icon: 1 });
},
errorMsg: function () {
layer.alert("错误", { time: 2000, icon: 2 });
},
fullScreen: function () {
var index = layer.open({
type: 1,
content: $("#createForm"),
area: ["320px", "195px"],
maxmin: true,
});
layer.full(index);
},
};
</script>
</html>
