我正在使用甜蜜警报(https://sweetalert2.github.io/)以这种方式在注册后弹出成功警报：
<script>
swal('Registration was successful',
'Welcome to bottles beach',
'success');
console.log("Form is correct and submitted");
</script>
但是我不知道为什么如果我使用其他方式，甜蜜警报就不起作用：
<script>
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
})
</script>
我希望如果用户点击ok，他将被重定向到另一个网页，但我不知道如何做到这一点，但在网上，我发现有人只使用第二种形式，在用户点击"确定"后将其重定向到网页；ok"；按钮有人知道我该怎么做吗？
我使用此库版本：https://unpkg.com/sweetalert/dist/sweetalert.min.js
需要解决的2个问题：-不起作用(什么都没有出现(Swal.fire但只有Swal起作用(…(-当用户在甜蜜警报中单击"确定"时，我如何重定向用户
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>Bottles Beach - Send your bottles</title> <!--Bottles Island-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--sweet alert lib-->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #7d5c3c;
}
.topnav {
overflow: hidden;
background-image:linear-gradient(180deg,#288bd7,#64ABE3,#64ABE3); background-size: 100%;
}
* {
box-sizing: border-box;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-image:linear-gradient(100deg,#288bd7,#64ABE3,#64ABE3); background-size: 100%;
transition: all 1 ease;
color: white;
}
.topnav a.active {
background-color: #62b1d0;
color: #f2f2f2;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.txt {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 53%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
.txt:hover
{
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.5); /* Black w/opacity/see-through */
color: rgba(240, 238, 242);
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 53%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
/*scroll bar*/
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 14% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.container {
margin: 10px auto;
height: 100%;
display: flex;
justify-content: center;
background-color: #966e47;
}
.board {
margin: 10px;
height: calc(100% - auto);;
width: calc(100% - 20px);
background-color: #b08153;
font-size: 2.5em;
font-weight: bold;
color: white;
text-align: center;
}
.input{
border-radius: 3px;
border: none;
width: 100%;
height: 32px;
background-color: #333333;
}
.lbl{
color: white;
}
.btnstyle{
width: 100%;
border: none;
border-radius: 3px;
background-color: #333333;
color: white;
text-color: black;
height: 34px;
margin-top: 10%;
}
.grandParentContaniner{
display:table; height:70%; margin: 0 auto;
}
.parentContainer{
display:table-cell; vertical-align:middle;
text-align: center;
width: 120%;
transition: all 1.9s ease;
}
.parentContainer:hover{
width: 70%;
transition: all 0.9s ease;
}
.form_login{
transition: all 1.5s ease;
width: 100%;
padding: 25px;
border-radius: 10px;
background-image:linear-gradient(150deg,#64ABE3,#64ABE3,#BBDBF7,#BBDBF7);
background-size: 100%;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="index.php">Send a Bottle</a>
<a href="bottles.php" class="active">Bottles</a>
<a href="cht.php" >Chat</a>
<a href="about.php">About</a>
<a href="donate.php">Donate</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<br>
<div class="grandParentContaniner">
<div class="parentContainer">
<div class="form_login">
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<h1 style="margin-bottom: 10%; color: #333333">Sign-in</h1>
<hr width="100%" style="color: black"> <br>
<input type="input" name="username" class="input" placeholder="insert your username"><br><br>
<input type="input" name="e-mail" class="input" placeholder="insert your e-mail"><br><br>
<input type="input" name="password" class="input" placeholder="retype your password"><br><br>
<input type="input" name="rtpassword" class="input" placeholder="insert your password"><br><br><br>
<input type="submit" class="btnstyle" value="Sign in">
</form>
<a href="login.php"><button class="btnstyle">Log-in</button></a>
</div>
</div>
</div>
<?php
//Connect To Database
$username="";
$password="";
$dbname="";
$name ="";
$hour =date('H:i');
$insert = "";
$cont = 0;
$dt = date("Y-m-d");
$conn = new mysqli($hostname,$username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
/*
*/
if($_SERVER["REQUEST_METHOD"] == "POST"){
$username = $_POST["username"];
$email = $_POST["e-mail"];
$password = $_POST["password"];
$rtpassword = $_POST["rtpassword"];
$nook = false;
$errsameuser = false;
$queryy = "SELECT username FROM users";
$result = $conn->query($queryy);
if ($result->num_rows > 0)
{
//output data of each row
while($row = $result->fetch_assoc())
{
if( $row["username"] == $username){ //username already exist
$errsameuser = true;
}
}
}
if($password == $rtpassword){ //pssw e conferma pssw enno uguali
?>
<script>
console.log("password 1 and 2 match");
</script>
<?
if(strlen($password) < 8)
$nook = true;
if(!preg_match("#[a-z]+#", $password) ) //pssw must cointain at least lower word
$nook = true;
if(!preg_match("#[A-Z]+#", $password) ) //pssw must cointain at least upper word
$nook = true;
if ( !preg_match("/['^£$%&*()}{@#~?><>,|=_+!-]/", $password) ) //pssw must cointain at least special character
$nook = true;
if ( !preg_match("#[0-9]+#", $password) ) //pssw must cointain at least number
$nook = true;
if($nook){
?>
<script>
console.log("but password not ok")
</script>
<?
}
if($errsameuser){
?>
<script>
swal('This username already exists',
'Please choose a new username',
'error');
</script>
<?
}
else{
$query = "INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')";
$result = $conn->query($query);
?>
<script>
Swal.fire({
title: 'Welcome to bottles beach',
text: "You successfully submitted the form",
icon: 'success',
showCancelButton: false,
confirmButtonColor: '#3085d6',
confirmButtonText: 'Great, show me the site!'
}).then((result) => {
if (result.isConfirmed) {
location="somewhereelse.html"
}
})
console.log("Form is correct and submitted");
</script>
<?
}
}
}
$conn->close();
?>
<!-- Modal content -->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
function openpopup() {
modal.style.display = "block";
}
// When the user clicks on the button, open the modal
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
手动
Swal.fire({
title: 'Welcome to bottles beach',
text: "You successfully submitted the form",
icon: 'success',
showCancelButton: false,
confirmButtonColor: '#3085d6',
confirmButtonText: 'Great, show me the site!'
}).then((result) => {
if (result.isConfirmed) {
location = "somewhereelse.html"
}
})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.6/dist/sweetalert2.all.min.js"></script>