swal弹框出现的瞬间就消失了

原创

已于 2022-11-04 10:54:58 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #jquery #前端 #ajax #html

于 2021-08-19 17:12:01 首次发布

博客讨论了使用Swal弹框时遇到的问题，包括弹框瞬间消失、嵌套弹框导致的显示异常以及加载框无法关闭的情况。提出了解决方案，如延迟执行、检查代码结构以及避免过多的嵌套。同时提到了Ajax请求可能对Swal的影响，并提供了关闭加载框的示例代码。

swal弹框出现的瞬间就消失，弹框套着弹框结果第一个弹框不消失，swal.close()失效

写完代码后发现弹框并没有预想的情况出现，但是仔细阅读代码后发现也没有问题，之后在浏览器调试模式下打断点，发现弹框弹出来了，但是执行完方法后又消失了，猜测大致原因可能是嵌套的swal太多了，出现了bug，可以让这个弹框延迟一会再执行，如果还没用的话可以加长时间再试试，如果一直不行的话可以改变一下代码写法，不要让嵌套太多层swal

setTimeout(function(){
   
   
    swal("成功!", "", "success")

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CV_engineer_fan

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS swal() 弹出层的用法

懒虫的博客

08-20

4157

$grid->actions(function ($actions){ $actions->disableDelete(); $actions->disableEdit(); $actions->disableView(); $back_url = $_SERVER["QUERY_STRING"]; if (\request('_scope_') == 'trash

【前端】弹窗美化 layer 与 sweetalert 弹窗插件学习

微雨停了的博客

04-27

3193

文章目录一、layer.confirm1.1 效果1.2 用法1.3 代码分析二、layer.open2.1 效果2.2 用法2.3 示例三、layer.alert3.1 效果3.2 用法3.3 示例四、layer.msg 与 layer.load五、layer.js引入方法六、另一种alert美化——swal6.1 引入6.2 用法6.2.1 标准弹窗6.2.2 带标题的弹窗6.2.2 带成功提示的弹窗七、layer学习一、layer.confirm 1.1 效果此时只有点击确定，才会执行删除操作；

2 条评论您还未登录，请先登录后发表或查看评论

告别单调加载动画：SweetAlert2 自定义指示器全攻略

最新发布

gitblog_01103的博客

10-10

280

你是否还在为网页加载状态的用户体验发愁？普通的旋转加载图标（Spinner）已经无法满足现代 Web 应用的设计需求，而 SweetAlert2 提供了强大的自定义能力，让你轻松实现从经典 spinner 到高级骨架屏的各种加载效果。本文将带你深入了解如何利用 SweetAlert2 的加载指示器功能，提升用户体验。读完本文，你将能够： - 掌握 SweetAlert2 默认加载指示器的使用方法...

Ajax 请求的坑

孤舟残月梦还长存的专栏

02-21

2264

一、Ajax 请求的 CSRF 保护机制开发普通页面，在一般情况下，我们使用 jquery 的 Ajax 代替原生 js 向后端发起请求是很方便的。后端在一般情况下，我们使用的是像 laravel、Yii、ThankPHP 或者 CodeIgniter 等等这样的框架。这些框架无一例外都使用了 CSRF保护机制，什么是 CSRF？CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性。简单理解一下，最常见的情况，就是 A 站点的页面去请...

sweet-alert的swal()出现瞬间自动消失(type:“success”类型)

loster_Li的博客

04-23

8667

1.普通的swal()显示，设置定时器(虽然浪费一点性能)。setTimeout(function(){swal("提示","操作成功","success"); },100);2.普通的swal()显示后，需要自动刷新页面(有时候会出现window.location.reload()自动刷新掉swal()语句，导致没有按swal()的确定按钮，就自动刷新页面)，设置双定时器可以解决。setTime...

sweetalert2加载弹窗定时自动关闭显示剩余时间

ssjdoudou的博客

02-07

9660

默认是毫秒级的 Swal.fire({ title: 'Auto close alert!', html: 'I will close in <b></b> milliseconds.', timer: 2000, timerProgressBar: true, onBeforeOpen: () => { Swal.showLoadin...

多个swal弹框套用时，href无法使用的问题

liulv_yan的博客

06-16

357

当多个多个swal弹框套用时，最底层的swal的function（）方法中的href无法使用。 swal({ title: "", text: "<input type='checkbox' name='ChildInherit' id='ChildInherit' checked='checked'> 同时设置子部门", html: true, type: "

解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题

10-17

这通常是由于在执行异步函数（如ajax）期间，页面的某些操作导致了页面的刷新或是跳转，从而打断了弹框的显示。由于页面刷新或跳转，浏览器会执行新的页面加载，这将导致之前的弹框关闭。 5. 解决弹框一闪而过的...

精选资源

Swal-demo-Last-Summer-2020

02-12

5. **动画效果**：内置平滑的动画过渡，使得对话框的出现和消失更加自然。 6. **堆叠显示**：当多个Swal对话框需要同时显示时，它们会按顺序堆叠，而不是简单地覆盖。 7. **Promise支持**：Swal与Promise兼容，...

Angular中sweetalert弹框的基本使用教程

10-18

在实现过程中，需要关注版本兼容性、正确引入资源文件、掌握不同类型的弹框使用方法，并处理可能出现的API版本差异问题。通过正确使用，可以将sweetalert集成到Angular项目中，提升应用的用户界面和交互质量。

swal弹窗_swal() 弹出层的用法

weixin_39622399的博客

12-22

1669

swal()方法是一个提示框；swal({title: "",text: "请扫描用户手机上的付款码",type: "input",showCancelButton: true,closeOnConfirm: false,cancelButtonText: "取消",confirmButtonText: "确认",imageUrl: "/assets/images/icon/scancode.gi...

sweetalert加载弹窗定时自动关闭

09-19

sweetalert加载弹窗定时自动关闭，包含加载图片，作为一个例子

双重swal不生效

qq_44927883的博客

03-27

640

$("#address_del_{{ address.id }}").click(function () { swal({ title: "确认删除？", text: "删除后无法恢复！", type: "info", showCancelButton: true, cancelBu...

js swal()弹出框

weixin_30267785的博客

06-29

3450

做前端开发的时候时常会遇到修改成功、新增成功这类弹出框，用alert的话未免有点太low了，而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下： swal() 弹出框样式如下：代码如下： swal("success", "edit successfully", "success"); 当然，还需要引入sweetale...

swal 不需要点击确认按钮，自动关闭，不显示确认按钮

张宇的博客

12-23

4866

描述 swal 不需要点击确认按钮，自动关闭，不显示确认按钮 swal({title:"提交成功", text:"提交成功！", type:"success", showCancelButton:false, showConfirmButton:false, buttons: false,...

swal弹窗_swal() 弹出删除确认框

weixin_39542093的博客

12-22

577

//删除function del() {var id = "";var row = $.map($("#DataList").bootstrapTable('getSelections'), function (row) {id = row.Id;return row;});if (row == null || row.length <= 0) {swal("提示信息", "请选择要删除的记...

swal 弹窗html页面,JavaScript SweetAlert插件实现超酷消息警告框

weixin_42501688的博客

06-04

873

swal()弹窗多个按钮

qq_40386177的博客

08-13

2109

swal({ title: "用户是否已经付款?", icon: "warning", dangerMode: true, buttons: { cancel: "取消", defeat: "未付款", confirm: { text:"已付款", value: "confirm" } } }).then((value) => { switch (value) { case "defeat":

swal 弹窗html页面,SweetAlert - 演示6种不同的提示框效果

weixin_34672875的博客

06-04

2247

SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。查看演示下载资源：1612次下载资源下载积分：35积分HTML首先放置6个不同的提示按钮。基本示例：点击这里提示成功：点击...

多个弹框

06-09

### 多个弹框的解决方案与实现方法在实际开发中，多个弹框叠加或管理是一个常见的需求。以下将详细介绍如何解决弹框叠加问题，并提供实现多个弹框的方案。 #### 1. 弹框叠加问题的原因分析当页面中存在多个弹框时，如果弹框没有正确销毁或管理，可能会导致弹框叠加的问题。例如，在EasyUI中，弹框是根据`easyui-dialog`自动生成的[^1]。这些生成的弹框通常位于页面的`rightcontent`之外，因此当`rightcontent`重新加载时，弹框并不会被清除掉，从而导致叠加现象。 #### 2. 解决弹框叠加问题的方法为了防止弹框叠加，可以采取以下措施： - **手动销毁弹框**：在每次打开新弹框之前，确保关闭或销毁之前的弹框。例如，在EasyUI中可以使用`$('#dialogId').dialog('close')`来关闭弹框。 - **动态生成弹框**：避免直接在HTML中定义弹框，而是通过JavaScript动态创建和销毁弹框。这样可以更好地控制弹框的生命周期。 - **使用唯一标识符**：为每个弹框分配唯一的ID或名称，以确保不会重复创建相同的弹框。 #### 3. 实现多个弹框的方案对于多个弹框的需求，可以采用以下两种常见的方式： ##### 方案一：嵌套弹框嵌套弹框是指在一个弹框中打开另一个弹框。这种方式适用于需要逐步引导用户完成操作的场景。以下是基于SweetAlert2的实现示例[^2]： ```javascript swal({ title: "第一步", text: "请确认操作", type: "info", confirmButtonText: "下一步" }, function() { swal({ title: "第二步", text: "请再次确认", type: "info", confirmButtonText: "确定" }, function() { // 执行最终操作 console.log("用户完成了所有步骤"); }); }); ``` ##### 方案二：队列管理弹框队列管理弹框是指将多个弹框按顺序依次显示。这种方式适用于需要批量提示用户的场景。以下是一个简单的实现示例： ```javascript let alertQueue = [ { title: "提示1", text: "这是第一个弹框" }, { title: "提示2", text: "这是第二个弹框" } ]; function showNextAlert() { if (alertQueue.length > 0) { let currentAlert = alertQueue.shift(); swal({ title: currentAlert.title, text: currentAlert.text, confirmButtonText: "确定" }, showNextAlert); } } showNextAlert(); ``` #### 4. 弹框管理的最佳实践为了更好地管理多个弹框，可以遵循以下最佳实践： - **全局状态管理**：使用状态管理工具（如Redux或Vuex）来跟踪当前弹框的状态。 - **事件驱动机制**：通过事件监听器来触发弹框的显示或隐藏。 - **样式隔离**：确保每个弹框的样式独立，避免相互影响。 ### 结论通过上述方法，可以有效解决弹框叠加问题，并实现多个弹框的管理和显示。无论是嵌套弹框还是队列管理弹框，都需要结合具体的业务场景选择合适的方案。