Javascript 当用户单击sweet alert的ok按钮时,重定向到网页
我正在使用sweet alert()在注册后以以下方式弹出成功警报:Javascript 当用户单击sweet alert的ok按钮时,重定向到网页,javascript,alert,sweetalert,Javascript,Alert,Sweetalert,我正在使用sweet alert()在注册后以以下方式弹出成功警报: <script> swal('Registration was successful', 'Welcome to bottles beach', 'success'); console.log("Form is correct and submitted"); </script> swal('注册成功', “欢迎来到瓶子海滩”, "
<script>
swal('Registration was successful',
'Welcome to bottles beach',
'success');
console.log("Form is correct and submitted");
</script>
swal('注册成功',
“欢迎来到瓶子海滩”,
"成功";;
控制台日志(“表格正确且已提交”);
但是我不知道为什么如果我用另一种方式,甜蜜警报不起作用:
<script>
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
})
</script>
喷火({
图标:“错误”,
标题:“哎呀……”,
短信:“出了点问题!”,
页脚:“”
})
我希望,如果用户单击“确定”,他将被重定向到另一个网页,但我不知道如何做,但在网上我发现,人们在单击“确定”按钮后,只使用第二个表单将用户重定向到网页;
有人知道我该怎么做吗
我使用此库版本:
需要解决的两个问题:
-不工作(什么也没有出现)Swal.fire但只有Swal工作(…)
-当用户在sweet alert中单击ok时,如何重定向用户
完整代码:
<!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>
瓶子海滩-发送你的瓶子
正文,html{
身高:100%;
保证金:0;
字体系列:Arial、Helvetica、无衬线字体;
背景色:#7d5c3c;
}
托普纳夫先生{
溢出:隐藏;
背景图像:线性梯度(180度,#288bd7,#64ABE3,#64ABE3);背景大小:100%;
}
* {
框大小:边框框;
}
.topnav a{
浮动:左;
显示:块;
颜色:#F2F2;
文本对齐:居中;
填充:14px 16px;
文字装饰:无;
字号:17px;
}
.topnav a:悬停{
背景图像:线性梯度(100度,#288bd7,#64ABE3,#64ABE3);背景大小:100%;
过渡期:全部1个月;
颜色:白色;
}
.topnav a.active{
背景色:#62b1d0;
颜色:#F2F2;
}
.topnav.icon{
显示:无;
}
@媒体屏幕和屏幕(最大宽度:600px){
.topnav a:not(:第一个子项){display:none;}
.topnav a.icon{
浮动:对;
显示:块;
}
}
@媒体屏幕和屏幕(最大宽度:600px){
.topnav.responsive{位置:相对;}
.topnav.responsive.icon{
位置:绝对位置;
右:0;
排名:0;
}
.topnav.a{
浮动:无;
显示:块;
文本对齐:左对齐;
}
}
.txt{
背景色:rgb(0,0,0);/*回退色*/
背景色:rgba(0,0,0,0.4);/*黑色w/不透明度/透明*/
颜色:白色;
字体大小:粗体;
边框:3px实心#f1f1;
位置:绝对位置;
最高:53%;
左:50%;
转换:翻译(-50%,-50%);
z指数:2;
宽度:80%;
填充:20px;
文本对齐:居中;
}
.txt:悬停
{
背景色:rgb(0,0,0);/*回退色*/
背景色:rgba(0,0,0,0.5);/*黑色w/不透明度/透明*/
颜色:rgba(240238242);
字体大小:粗体;
边框:3px实心#f1f1;
位置:绝对位置;
最高:53%;
左:50%;
转换:翻译(-50%,-50%);
z指数:2;
宽度:80%;
填充:20px;
文本对齐:居中;
}
/*滚动条*/
:-webkit滚动条{
宽度:10px;
}
/*跟踪*/
:-webkit滚动条轨迹{
背景#f1f1;
}
/*处理*/
:-webkit滚动条拇指{
背景:#888;
}
/*悬停手柄*/
:-webkit滚动条拇指:悬停{
背景:#555;
}
.莫代尔{
显示:无;/*默认情况下隐藏*/
位置:固定;/*保持原位*/
z指数:1;/*位于顶部*/
左:0;
排名:0;
宽度:100%;/*全宽*/
高度:100%;/*全高*/
溢出:自动;/*根据需要启用滚动*/
背景色:rgb(0,0,0);/*回退色*/
背景色:rgba(0,0,0,0.4);/*黑色w/不透明度*/
}
/*模态内容/框*/
.模态内容{
背景色:#fefe;
保证金:14%自动;/*15%从顶部和居中*/
填充:20px;
边框:1px实心#888;
宽度:80%;/*可能更多或更少,具体取决于屏幕大小*/
}
/*关闭按钮*/
.结束{
颜色:#aaa;
浮动:对;
字号:28px;
字体大小:粗体;
}
.关闭:悬停,
.结束:聚焦{
颜色:黑色;
文字装饰:无;
光标:指针;
}
.集装箱{
利润率:10px自动;
身高:100%;
显示器:flex;
证明内容:中心;
背景色:#966e47;
}
.董事会{
利润率:10px;
高度:计算(100%自动);;
宽度:计算(100%-20px);
背景色:#b08153;
字号:2.5em;
字体大小:粗体;
颜色:白色;
文本对齐:居中;
}
.输入{
边界半径:3px;
边界:无;
宽度:100%;
高度:32px;
背景色:#333333;
}
.lbl{
颜色:白色;
}
B.B.风格{
宽度:100%;
边界:无;
边界半径:3px;
背景色:#333333;
颜色:白色;
文字颜色:黑色;
高度:34px;
利润率最高:10%;
}
.祖父母康塔纳{
显示:表格;高度:70%;边距:0自动;
}
.parentContainer{
显示:表格单元格;垂直对齐:中间;
文本对齐:居中;
宽度:120%;
过渡:所有1.9秒轻松;
}
.parentContainer:悬停{
宽度:70%;
过渡:所有0.9秒缓解;
}
.form_登录{
过渡:所有1.5s轻松;
宽度:100%;
填充:25px;
边界半径:10px;
背景图像:线性梯度(150度,#64ABE3,#64ABE3,#BBDBF7,#BBDBF7);
背景大小:100%;
}
Swal.fire({
标题:“欢迎来到瓶子海滩”,
文本:“您已成功提交表单”,
图标:“成功”,
showCancelButton:false,
confirmButtonColor:“#3085d6”,
confirmButtonText:“太好了,让我看看这个网站!”
})。然后((结果)=>{
如果(结果已确认){
location=“somewhere.html”
}
})
window.location=”https://www.example.com/“
是用于将浏览器发送到新URL(带有GET请求)的Javascript命令。不知道这和sweetalert有什么关系。您的问题似乎有点混淆了问题的位置/内容。我强烈建议不要从W3SCOOLSI加载实际的CSS如果我使用Swal.fire它对我不起作用(没有显示任何内容)您使用的是正确版本的Swal吗?是的,我想->适用于我的库