div中的SweetAlert2

基础概念

SweetAlert2 是一个基于 JavaScript 的弹窗库，用于创建美观、响应式的弹窗。它可以替代浏览器原生的 alert、confirm 和 prompt 对话框，提供更多的自定义选项和更好的用户体验。

类型

SweetAlert2 提供了多种类型的弹窗，包括但不限于：

普通提示（swal）
成功提示（swal.fire({ icon: 'success' })）
错误提示（swal.fire({ icon: 'error' })）
警告提示（swal.fire({ icon: 'warning' })）
信息提示（swal.fire({ icon: 'info' })）
确认对话框（swal.fire({ icon: 'question', confirmButtonText: '确定' })）

应用场景

SweetAlert2 可以应用于各种需要弹窗的场景，例如：

表单验证
用户确认操作
显示通知信息
密码重置提示

示例代码

以下是一个简单的示例，展示如何在 HTML 中使用 SweetAlert2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SweetAlert2 Example</title>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
    <div>
        <button onclick="showAlert()">Show Alert</button>
    </div>

    <script>
        function showAlert() {
            Swal.fire({
                title: 'Hello World!',
                text: 'This is a simple alert.',
                icon: 'info',
                confirmButtonText: 'OK'
            });
        }
    </script>
</body>
</html>

常见问题及解决方法

问题：SweetAlert2 弹窗不显示

原因：

未正确引入 SweetAlert2 库：确保在 HTML 文件中正确引入了 SweetAlert2 的 JavaScript 文件。
脚本执行顺序：确保在调用 SweetAlert2 之前已经加载了库。

解决方法：

确保在 HTML 文件中正确引入 SweetAlert2 库：
确保在 HTML 文件中正确引入 SweetAlert2 库：
确保在调用 SweetAlert2 之前已经加载了库：
确保在调用 SweetAlert2 之前已经加载了库：

问题：SweetAlert2 弹窗样式不正确

原因：

CSS 冲突：可能存在其他 CSS 文件或内联样式影响了 SweetAlert2 的样式。
版本问题：使用的 SweetAlert2 版本可能存在样式问题。

解决方法：

检查并确保没有其他 CSS 文件或内联样式影响 SweetAlert2 的样式。
确保使用的是最新版本的 SweetAlert2：
确保使用的是最新版本的 SweetAlert2：

参考链接

希望这些信息对你有所帮助！如果有更多问题，请随时提问。

页面内容是否对你有帮助？

有帮助

没帮助

如何使用带有甜蜜警示2的react jsx来显示json数据？

、、

这个想法是关于使用甜蜜警示2将来自json的内容显示到react页面。import React from 'react';import withReactContent from 'sweetalert2className="container"> <div c

浏览 1提问于2019-04-02得票数 0

2回答

带有rails 6的sweetalert2

、、

我使用将sweetalert2添加到rails 6应用程序中，但我得到了这个错误我在environment.js文件中添加了以下代码 sweetalert2: 'sweetalert2/dist/sweetalert2.all&#x

浏览 0提问于2019-07-04得票数 2

回答已采纳

1回答

Flatpickr + SweetAlert2 =键盘可访问性问题

、、、

document.querySelector('button').addEventListener('click', () => { title: 'Select a date', <input type="text" class="flatpickr">

浏览 6提问于2021-04-13得票数 2

回答已采纳

1回答

通过纱安装甜警报

、、、、

我正试图通过Yarn安装库Sweet警报，但我得到了以下错误：我的步骤如下： *= requiresweetalert/dist

浏览 1提问于2018-08-07得票数 1

1回答

div中的SweetAlert2

、

我遇到了同样的问题，我希望在一个div中有sweetalert2 (而不是一个甜蜜警报吐司)，因为我希望当甜蜜警报弹出时，除了它之外的另一个div是可滚动的。请看这里的图片：sweetalert2 var id = document.getElementById('mydiv');title: "question",allowO

浏览 17提问于2020-11-09得票数 2

回答已采纳

1回答

sweetalert2 Uncaught :意外标识符

、、、、

我很想使用SweetAlert2。但是我不能让它起作用..。我读了很多关于堆叠溢出的文章。但是，我无法解决我的问题..。br>World</span></div> <div

浏览 0提问于2018-08-02得票数 0

2回答

无法调用其类型缺少调用签名的表达式。类型'typeof import("sweetalert2")‘没有兼容的调用签名

、

我得到“无法调用类型缺少调用签名的表达式。类型'typeof import("sweetalert2")‘没有兼容的调用签名。”在angular中使用SWAL时出现此错误。我的包-cli.json看起来像这样 "version": "0.0.8", "resolved": "https://registry.npmjs.

浏览 1提问于2019-05-22得票数 2

2回答

使用SweetAlert2和TypeScript，无法找到模块‘甜警报2/dist/甜警报2.js’的声明文件

、、、、

我正在将我的一个项目迁移到TypeScript，在该项目中使用了库。导入SweetAlert2 ( JS和CSS)的默认方法是这在TypeScript中很好，因为库中有类型：这是只对JS重要

浏览 0提问于2019-08-02得票数 6

回答已采纳

3回答

ReferenceError："Swal未定义“

、、、

但是，当我在VueJs方法中调用swall.fire({})时，我的控制台swall.fire({})中会出现一个错误。这是我的代码: Swal.fire({ ); });当然，我已经使用：import Swal from '

浏览 2提问于2019-11-16得票数 11

1回答

Sweetalert2索引在selectize.js打开时保持可见-独立于z索引

、、

我有一个这样的sweetalert2：当我想挑选某样东西时，它看起来是这样的：我在sweetalert2中的代码是： <div className="row"> <div className=&q

浏览 0提问于2019-12-15得票数 0

3回答

如何通过Laravel安装sweetalert2？

、、、

npm install --save sweetalert2STEP3:在app.js中加上这一行..。const swal = require('sweetalert2');mix.sass('resources/sass/app

浏览 2提问于2018-11-27得票数 5

回答已采纳

1回答

在vue中引用SweetAlert2模态中的图像

、

我有一个SweetAlert2模式，我想在它里面使用一个图像，但是我引用了一个img，像这样的src="./assets/img/cry.png“或者src="../assets/img/cry.png”它不会显示，但是在vue的其他部分，这个src地址工作得很好，我应该如何在sweetAlert2中引用它？ this.$swal({ title: '<div style="fo

浏览 18提问于2021-01-13得票数 0

回答已采纳

1回答

重定向至另一个使用sweetalert2的网站并获取信息

、、、、

所以我想使用sweetalert2重定向到，比如带有?ID=的deleting.php。我怎么把这个东西放进去呢？这是我的代码。第一个是在php echo html中，这样我就可以把sql数据库中的所有东西都放进去。echo'<button class="

浏览 7提问于2020-07-09得票数 0

回答已采纳

5回答

如何在sweetalert2中使用angular2

、、、、

我创造了一个棱角分明的项目。在app.component.ts内部，我添加了甜蜜的警报代码deleteRow() { title: '', ); }我做到了，并在index.html中添加了路径 <script src="node_mod

浏览 1提问于2016-07-30得票数 18

2回答

Sweetalert2不会关闭

、、

使用 public showHelp还尝试将目标设置为body以外的其他内容，结果是相同的。

浏览 7提问于2017-07-11得票数 2

回答已采纳

5回答

我正在对一个角度为7.0.7和节点10.20.1的应用程序进行维护。我工作得很好，很久以前就安装好了，插件也很好用。昨天，我的PC重新启动，当我运行ng serve时，我得到了这个错误 node_modules/sweetalert2/sweetalert2.d.ts(277,39)：ERROR TS1005中的错误node_modules/sweetalert2/sweetalert2.d.ts(277,70)：error TS1128:预期<e

浏览 10提问于2020-06-01得票数 4

3回答

在angular2中导入sweetalert2模块返回404

、、、

我一直在遵循在线文档，并尝试在我的angular2应用程序中使用sweetalert2插件。不幸的是，在我加入这篇文章之后我收到一个404错误，告诉我没有找到甜蜜警报

浏览 3提问于2017-02-15得票数 2

1回答

甜蜜警报2针对的是div而不是整个窗口？

是否可以针对的div而不是整个窗口我问的原因是，我有一些JavaScript游戏，我想使用这个框架。这些是加载在<div>中的，而不是居中在页面上。甜蜜的提示弹出窗口打开时看起来很奇怪，因为它是未对齐的。任何帮助都是非常好的:)

浏览 17提问于2016-08-05得票数 2

回答已采纳

2回答

错误:在'sweetalert2‘中找不到导出’默认‘(导入为'Swal') (模块没有导出)

、、、

我试图在我的角度项目中包括sweetalert2，但是它会给出编译时的错误。错误/src/app/pages/signup/signup.component.ts:29:16-25 -错误:导出‘默认’(导入为'Swal')在'sweetalert2‘中找不到(模块没有导出)步进 1.安装sweetalert2 2.在组件.ts文件上导入(从‘sweetalert2’导入Swal )3.使用

浏览 23提问于2022-01-26得票数 0

1回答

单击动态创建的按钮时，如何在嵌入式mp4上暂停播放？

、、、

我使用的是QuickQuiz 中的代码，并修改了代码以使用嵌入式video (mp4)，而不是从json文件加载的img -还使用SweetAlert2库而不是最初实现的第一个SweetAlert。我想在单击四个video按钮中的任何一个按钮时暂停播放每个quiz-btn btn。这些按钮都使用swal.Fire触发SweetAlert2对话框。我试着在页面上包含如下脚本： document.querySelector("#

浏览 0提问于2019-05-15得票数 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

div中的SweetAlert2

基础概念

相关优势

类型

应用场景

示例代码

常见问题及解决方法

问题：SweetAlert2 弹窗不显示

问题：SweetAlert2 弹窗样式不正确

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐