如何使用甜蜜警报在单击确定后重新加载页面
甜蜜警报（SweetAlert）是一个用于替换浏览器内置的alert、confirm和prompt对话框的JavaScript库，它提供了更加美观和可定制化的对话框。如果你想在用户点击“确定”按钮后重新加载页面，可以通过以下步骤实现：
基础概念
甜蜜警报是一个基于Promise的库，它允许你创建各种类型的对话框，包括警告、确认和提示。通过使用甜蜜警报，你可以自定义对话框的样式、文本和按钮行为。
相关优势
- 美观：提供了多种内置的样式和动画效果。
- 可定制：可以高度自定义对话框的外观和行为。
- 易于使用：基于Promise的设计使得代码更加简洁和易读。
应用场景
- 用户确认操作
- 显示错误或警告信息
- 请求用户输入
示例代码
以下是一个使用甜蜜警报在用户点击“确定”后重新加载页面的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SweetAlert Reload Example</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
</head>
<body>
<button onclick="showAlert()">Click Me</button>
<script>
function showAlert() {
swal({
title: "Reload Page?",
text: "Are you sure you want to reload the page?",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willReload) => {
if (willReload) {
location.reload();
}
});
}
</script>
</body>
</html>解释
- 引入甜蜜警报库：通过CDN引入甜蜜警报的JavaScript文件。
- 创建按钮：在HTML中创建一个按钮，并为其添加点击事件处理函数
showAlert。 - 显示对话框：在
showAlert函数中，使用swal函数显示一个警告对话框，询问用户是否要重新加载页面。 - 处理用户响应：使用
.then方法处理用户的响应。如果用户点击“确定”，则调用location.reload()方法重新加载页面。
参考链接
通过这种方式，你可以优雅地提示用户并处理他们的响应，从而实现页面的重新加载。
相关·内容
1回答
我有甜蜜的警报显示后，产品已被删除。但是，页面在甜警报后的几毫秒内就重新加载了window.location.reload();。除非单击“确定”，否则如何才能重新加载。就像正常的alert()。
浏览 4提问于2016-09-02得票数 0
回答已采纳
10回答
你好，我有一个使用甜蜜警报的代码 swal("Good job!", "You clicked the button!", "success") 此代码将弹出一条消息，并有一个按钮up，我想做的是在单击up按钮后刷新页面。 我能做到吗？
浏览 157提问于2016-03-30得票数 11
回答已采纳
1回答
我想在我的页面上使用甜蜜警报。问题是，在成功操作之后，会出现下面的甜蜜警告，当单击OK按钮时，页面必须重新加载()。但是，with sweetalert会在出现时消失，页面会重新加载()。因此，我不希望在单击OK按钮之前页面被重新加载()。我该怎么办？
编辑注意:我在
浏览 0提问于2019-07-17得票数 0
我试图在我的代码中调用一个甜蜜的警报，它有一个登录页面。成功登录后，我希望弹出甜蜜警报。</SweetAlert> );
在我的提交处理中，一旦我验证了用户，我希望使用一个甜蜜的警告确认对话框显示一个成功的弹出窗口但是我不能让弹出窗口加载
浏览 3提问于2019-08-22得票数 1
4回答
现在，我已经设置了甜蜜的警报，以显示时，单击链接到unlink.php。这是可行的，但当我在甜蜜的警报中单击OK时，什么都不会发生。我需要一些如何重置preventDefault功能，当我点击确定在甜蜜警告框。谢谢。甜蜜警报代码： $('#unlink').on('click', function
浏览 1提问于2018-10-29得票数 0
回答已采纳
在我的html模板中，表单验证的错误消息如下： <span class="text-danger small">{{ field.errors }}</span>如果我想使用甜蜜警报，我该怎么做呢？如果我像下面这样使用，它会在页面加载时给出一个空警报，但当错误发生时，它会给出一个空警报，比如当<em
浏览 0提问于2019-05-21得票数 0
3回答
在页面加载时弹出自动加载
、、、
我刚刚购买了一个网站模板，其中包括‘甜蜜警报’。在模板上，您必须单击一个按钮以显示弹出警报，请参见下面的代码是否可以在页面加载时加载此文件？
浏览 2提问于2016-06-22得票数 1
回答已采纳
Dropzone和Sweet alert是我在我的项目中使用(试图)的两个。我有一个简单的视图，在屏幕的前半部分显示dropzone，在下半部分显示"grid“。queuecomplete", function (file) { location.reload();请注意，我使用的是标准警报我想我应该用甜蜜的警报替换警报</em
浏览 0提问于2015-09-23得票数 0
单击“确定”按钮时，应该重新加载页面。除非页面不应该被重新加载。我有谷歌做这个。还是没有结果。如何实现这一目标。
浏览 5提问于2017-03-30得票数 0
回答已采纳
我在我的lightning组件捆绑包“页面”中使用了甜蜜的alert 2。它就像一个护身符：
我不确定甜蜜警报中的css是否被主题修改了，或者是其他什么东西，但我不知道<em
浏览 0提问于2018-05-08得票数 0
当用户打开任何页面时，我想调用一个函数，而不单击该页面，他就会关闭页面。我遵循这个链接。在此链接中，当您不单击“结果部分”和“重新加载”页面时，它将不会显示警报，但当您单击“结果部分”并重新加载
浏览 3提问于2017-10-10得票数 0
3回答
所以在成功函数中，我做了一些验证。content: 'There are no activities for selected criteria',});
但是，当我只使用像这个alert("There are no activities for selected criteria");这样的简单警报时，它就能工作了。
浏览 1提问于2016-11-23得票数 0
回答已采纳
3回答
每一行都有一个按钮，如果按下这个按钮，就会通过jQuery显示一个甜蜜警报对话框。().sweet-overlay, .sweet-alert{ }
使用javascript的
浏览 3提问于2016-11-15得票数 0
5回答
甜警报立刻消失
、、
; }在我的页面中有一个绑定js函数的按钮，函数执行这段代码。在页面上，当我单击按钮时，会出现“您确定吗？”确认框。但是当我点击“是”的时候，下一个甜蜜的警报就会立即消失。怎么了？
浏览 6提问于2016-03-11得票数 3
回答已采纳
2回答
是否可以在禁用的引导按钮上使用甜蜜警报？<a href="<?php echo base_url() . 'deleteStaff/' . $record->userId; ?我想添加一个甜蜜的警报，通知用户，如果他们尝试单击禁用按钮，他们没有删除权限。
我尝试通过在if语句中回显甜蜜警报id来向按钮添加甜蜜警报</
浏览 5提问于2020-08-05得票数 0
1回答
在DOM中注入的元素不会触发甜蜜警报。我在我的Rails5应用程序中使用了甜蜜的alert 2 gem (https://github.com/nicolasblanco/sweet-alert2-rails)，它工作得很好，直到我添加了带有我知道我必须在添加元素后调用甜蜜警报事件侦听器来绑定它们，但我不知道如何绑定它们。在某个地方，gem正在初始化带有dat
浏览 36提问于2019-04-11得票数 0
1回答
单击按钮时刷新带有框架集的页面
、、、、
用户登录后，如果有任何警报，它会将主内容框架重定向到一个带有确认按钮的警报页面。当他们单击此按钮时，我希望重新加载index.aspx。如果我使用response.redirect("index.aspx") on按钮，单击它会用另一个框架集重新加载主内容框架。单击服务器端按钮可以在数据库中设置一个标志，这样用户就不会再次看到警报。
我的问题是
浏览 0提问于2011-11-16得票数 2
回答已采纳
1回答
<a href="#gotothisid"></a></div>
单击后，页面将在警报后重新加载，但它应该将焦点转移到#gotothisid。在没有重新<
浏览 3提问于2022-09-09得票数 -1
我有一个删除按钮，当用户点击它时，我想要一个甜蜜的警报，要求确认，一旦用户点击是和确认，然后我想要消失当前确认警报，并显示另一个警报，告诉用户删除，然后2秒后页面重新加载。我已经这样做了，但我的问题是，当用户单击确认警报时，他会得到另一个警报，但带有一些先前警报的痕迹。() (我没有在这里上传它们，因为我不能因为声誉而上传它们)。
浏览 2提问于2018-10-16得票数 0
1回答
使用甜蜜警报的搜索页面
、、、
我正在尝试创建一个名为'list of users‘的页面，在这里我有一个带有输入文本表单的甜蜜警报，用户在甜蜜警报中输入一个名称，然后使用类似表单的POST方法重定向到mywebsite.com/search甜蜜警示被放在主页上。', ) })</script> 如你所见
浏览 22提问于2020-04-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
