SweetAlert是一个JavaScript库,它提供标准alert()对话的替代品。
每当我单击 swal 内的“确定”按钮时,后面的主网页就会变得无响应。 点我 函数 myFunction(){ 斯瓦尔...
如何让sweetalert在没有承诺的情况下返回true/false进行确认?反应中
//定义 函数 sweetConfirm(标题、消息、回调) { 斯瓦尔({ 标题: 标题, 短信, 按钮:真 }).then((已确认) => { 如果(确认){ 打回来(); } }); } 导出默认
我有一个 HTML 表,其中的行包含来自 SQL 数据库的数据,表体位于 for 循环下以显示提取的所有行。在删除特定行之前,我想要一个 SweetAlert t...
我试图在多个模态中使用多种形式,正如我所读到的,我必须将 swal.mixin 与队列一起使用,所有这些形式内部都有多个输入。 我已经这样做了,但找不到...
这是我的 HTML 代码 我有两个输入按钮,我想在用户单击任何按钮时显示甜蜜警报 这是我的 HTML 代码 我有两个输入按钮,我想在用户单击任何按钮时显示甜蜜警报 <tr class="examples odd" id="UserId_1" role="row"> <td class="sorting_1">1</td> <td>admin</td><td>Mohammad</td> <td>Farzin</td><td class="warning"><input type="button" value="Delete" class="sweet-5" id="btn_Delete1"></td> </tr> <tr class="examples even" id="UserId_5" role="row"> <td class="sorting_1">2</td> <td>11</td><td>11</td> <td>11</td><td class="warning"><input type="button" value="Delete" class="sweet-5" id="btn_Delete5"></td> </tr> 脚本 $(document).ready(function () { document.querySelector('td.warning input').onclick = function () { swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonClass: 'btn-danger', confirmButtonText: 'Yes, delete it!', cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function (isConfirm) { if (isConfirm) { swal("Deleted!", "Your imaginary file has been deleted!", "success"); } else { swal("Cancelled", "Your imaginary file is safe :)", "error"); } }); }; }); 只有第一个输入按钮显示甜蜜警报,但是 当我单击第二个按钮时没有任何反应 您可能使用的是 SweetAlert 版本 2 并且您的代码适用于版本 1。 这应该有效: swal({ title: 'Are you sure?', text: 'Some text.', type: 'warning', showCancelButton: true, confirmButtonColor: '#DD6B55', confirmButtonText: 'Yes!', cancelButtonText: 'No.' }).then(() => { if (result.value) { // handle Confirm button click } else { // result.dismiss can be 'cancel', 'overlay', 'esc' or 'timer' } }); <script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script> 来源: 从 Swal1 迁移到 Swal2 试试这个 $(document).ready(function () { $('body').on('click', 'td.warning input', function () { swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonClass: 'btn-danger', confirmButtonText: 'Yes, delete it!', cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function (isConfirm) { if (isConfirm) { swal("Deleted!", "Your imaginary file has been deleted!", "success"); } else { swal("Cancelled", "Your imaginary file is safe :)", "error"); } }); }); }); 检查小提琴 http://jsfiddle.net/hoja/5a6x3m36/5/ 如果您想在单击任何按钮时收到甜蜜警报,请更改您的代码,如下所示: $(document).ready(function(){ $(document).on('click', 'button', function(){ Swal.fire({ type: 'success', title: 'Your work has been done', showConfirmButton: false, timer: 1500 }) }); }); 有了甜蜜的警报,就更容易了,例如我最喜欢一个链接,我需要的是调用 onclick 函数并确保我包含 sweetalser.css 和 sweetalert.min.js 我希望这对你有用 <a onclick="sweetAlert('Greetings', 'Hi', 'error');" class="" data-toggle="modal" href='#modale-id'><i class="fa fa-fw fa-plus"></i>Streams</a> 您只选择与 'td.warning input' 选择器匹配的第一个元素,这就是为什么第二个元素没有发生任何事情。 尝试querySelectorAll('td.warning input')方法。 这会返回一个数组,您可以循环遍历该数组来设置事件监听器。 window.onload=函数() { swal({ title: "PopOutTitle", text: "Your FIRST Name:", type: "input", showCancelButton: true, OnConfirm:school(); animation: "slide-from-top", inputPlaceholder: name }, function(inputValue){ if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("You need to write something!"); return false } document.getElementById("name").innerHTML=inputValue || "Unknown"; }); } 函数学校(){ swal({ title: "PopOutTitle", text: "Your last Name:", type: "input", showCancelButton: true, animation: "slide-from-top", inputPlaceholder: name }, function(inputValue){ if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("You need to write something!"); return false } document.getElementById("name").innerHTML=inputValue || "Unknown"; });**I want to show multiple swal popout so I want to call the school function when Ok Button is clicked. How can I do this?** <script> $(document).ready(function(){ $('.btn-danger').on("click", function(){ swal({ title: "Delete?", text: "Please ensure and then confirm!", type: "warning", showCancelButton: !0, confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel!", reverseButtons: !0 }).then(function (e) { if (e.value === true) { var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); var id = $('.btn-danger').attr('data-id'); var cur_row = this; $.ajax({ type: 'POST', url: "{{url('/product_delete')}}/" + id, data: {_token: CSRF_TOKEN}, dataType: 'JSON', success: function (results) { if (results.success === true) { swal("Done!", results.message, "success"); setTimeout(function(){ location.reload() }, 2000); } else { swal("Error!", results.message, "error"); } } }); } }); }); }); </script> /* Add link in head section */ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script> 以下示例取自https://sweetalert2.github.io/。 从这里获取最新版本的sweetalter2https://www.bootcdn.cn/limonte-sweetalert2/ 显示验证错误 <!DOCTYPE html> <html> <head> <title>Testing</title> <script src="https://cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/11.7.0/sweetalert2.all.js"></script> </head> <body> <script> Swal.fire({ icon: 'error', title: 'Validation Error!!!', text: 'Passwords Did not Match!', footer: '<a href="">Why do I have this issue?</a>' }) </script> </body> </html> 显示自定义html <!DOCTYPE html> <html> <head> <title>Testing</title> <script src="https://cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/11.7.0/sweetalert2.all.js"></script> </head> <body> <script> Swal.fire({ title: '<strong>HTML <u>example</u></strong>', icon: 'info', html: 'You can use <b>bold text</b>, ' + '<a href="//sweetalert2.github.io">links</a> ' + 'and other HTML tags', showCloseButton: true, showCancelButton: true, focusConfirm: false, confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!', confirmButtonAriaLabel: 'Thumbs up, great!', cancelButtonText: '<i class="fa fa-thumbs-down"></i>', cancelButtonAriaLabel: 'Thumbs down' }) </script> </body> </html> <tr class="examples odd" id="UserId_1" role="row"> <td class="sorting_1">1</td> <td>admin</td> <td>Mohammad</td> <td>Farzin</td> <td class="warning"> <input type="button" value="Delete" class="sweet-5" id="btn_Delete1"> </td> </tr> <tr class="examples even" id="UserId_5" role="row"> <td class="sorting_1">2</td> <td>11</td> <td>11</td> <td>11</td> <td class="warning"> <input type="button" value="Delete" class="sweet-5" id="btn_Delete5"> </td> </tr> js------------ $(document).ready(function () { // Adding a click event listener to all buttons with class sweet-5 $('.sweet-5').on('click', function () { swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", icon: "warning", buttons: { cancel: { text: "No, cancel plx!", value: null, visible: true, className: "btn-secondary", closeModal: true }, confirm: { text: "Yes, delete it!", value: true, visible: true, className: "btn-danger", closeModal: true } } }).then((isConfirm) => { if (isConfirm) { swal("Deleted!", "Your imaginary file has been deleted!", "success"); } else { swal("Cancelled", "Your imaginary file is safe :)", "error"); } }); }); });
我有一个表单,我想在提交时触发警报(使用 sweetalert): 我有一个表单,我想在提交时触发警报(使用 sweetalert): <form id="verbale" class="verbale" action="editor_conferma.php" method="post"> ... <input id="go" type="submit" name="go" value="go" class="swa-confirm"> </form> <script> $(document).on("submit", ".swa-confirm", function (e) { e.preventDefault(); var $myForm = $('.verbale'); if (!$myForm[0].checkValidity()) { $myForm[0].reportValidity() } else { swal({ title: "Are you sure?", text: "Did you check?", type: "warning", showCancelButton: true, confirmButtonText: "Yes, Submit!", }).then(function (result) { $myForm.submit(); }); } }); </script> 出现 sweetalert 对话框,但当我确认时,表单未传递并且提交似乎不起作用。 有什么提示吗? 您需要将提交分配给表单,并且不要使用 jQuery 提交,因为它会再次触发 sweetalert 我还使用最新版本的 swal,它有 buttons $("#verbale").on("submit", function(e) { // or if inserted $(document).on("submit","#verbale",function() { e.preventDefault(); const myForm = this; if (!myForm.checkValidity()) { myForm.reportValidity() } else { swal({ title: "Are you sure?", text: "Did you check?", icon: "warning", buttons: { cancel: true, confirm: true, } }).then(function(result) { myForm.submit() }) } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script> <form id="verbale" class="verbale" action="editor_conferma.php" method="post"> <input type="text" name="firstname" required /> <input id="go" type="submit" name="go" value="go" class="swa-confirm"> </form>
我正在尝试使用 SweetAlert2 弹出窗口而不是传统的 JS 弹出窗口。期待一个例子来实现与我刚接触 JS Concepts 一样的效果。访问-https://sweetalert2.github.io/ 实际上
在我的代码之一中,我使用的是 javascript sweet Alert 库: https://limonte.github.io/sweetalert2/ https://github.com/limonte/sweetalert2 我想有条件地禁用确认按钮,但不是...
通过其 html 方法使 sweetalert html 元素动态化
正如标题所预期的,我想让 sweetalert 的 html 元素动态化。 特别是,我有一个数组,其中包含元素。 我的目标是创建与 eleme 一样多的复选框...
通过其 html 方法使 sweetalert2 html 元素动态化
正如标题所预期的,我想让 sweetalert2 的 html 元素变得动态。 我正在使用 sweetalert2 库。 https://sweetalert2.github.io/ 特别是,我有一个数组,其中元素 i...
显示对话框(通过alert或sweetalert)滚动到页面顶部
我有一张长桌子(例如:1000 行)。每行都有一个按钮,如果按下该按钮,则会通过 jQuery 显示一个 sweetalert 对话框。 (http://t4t5.github.io/sweetalert/) 问题:如果我向下滚动,让我们...
我看到你可以使用内容选项,但我不太确定现在该怎么做,我有类似的东西: swal({标题: '你好', 文本: '你好 ${{name}}'...
如何在 Laravel 中使用 SweetAlert 发出提醒
我想使用 SweetAlert 来显示我的数据。 我尽了我的职责 公共函数注册() { Gate::authorize('管理员级别'); $url = URL::signedRoute( '雷吉斯...
我试图将文本放在我的 swal-box 中,但它不起作用: CSS3: .swal-模态{ 文本对齐:居中; } JavaScript: swal("myTitle", "一些文本 更多文字 更多文字);
我有一个使用 sweetalert.js 的 Laravel 5.8 项目。 我有一个这样的表格: @csr... 我有一个使用 sweetalert.js. 的 Laravel 5.8 项目 我有一个这样的表格: <form id="myForm" action="{{ route('acceptWallet') }}" method="POST"> @csrf <input type="checkbox" id="btn-submit" name="wallet_checked" onchange="this.form.submit();"> </form> 如您所见,我使用了 onchange="this.form.submit();" 来提交表单,而没有使用提交按钮,并且效果很好。 然后通过使用此脚本,我尝试显示 SweetAlert 确认消息框,其中包含 Yes 和 No 作为按钮: $(document).on('click', '#btn-submit', function(e) { e.preventDefault(); let form = $(this).parents('form'); swal( { title: "Attention!", text: "Are you sure you want to make this transaction", type: "warning", allowEscapeKey: false, allowOutsideClick: false, showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes", cancelButtonText: "No", showLoaderOnConfirm: true, closeOnConfirm: false }).then((isConfirm) => { if (isConfirm) { document.getElementById("myForm").submit(); return true; } return false; }); }); 现在它工作正常,但唯一的问题是,当我单击No按钮(即CancelButton)时,它仍然提交表单并调用操作。 所以问题是,当用户按下 No 按钮时,如何拒绝 submit()? 将代码更改为: $(document).on('click', '#btn-submit', function(e) { e.preventDefault(); let form = $(this).parents('form'); swal( { title: "Attention!", text: "Are you sure you want to make this transaction", type: "warning", allowEscapeKey: false, allowOutsideClick: false, showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes", cancelButtonText: "No", showLoaderOnConfirm: true, closeOnConfirm: false }).then((isConfirm) => { if (isConfirm === true) { document.getElementById("myForm").submit(); } }); }); 试试这个代码: $(document).on('click', '#btn-submit', function(e) { e.preventDefault(); let form = $(this).parents('form'); swal( { title: "Attention!", text: "Are you sure you want to make this transaction", type: "warning", buttons: { cancel: 'No', defeat: { text: 'Yes', value: true } }, closeOnConfirm: false }).then((isConfirm) => { if (isConfirm === true) { document.getElementById("myForm").submit(); } }); }); 首先,您需要在要使用 SweetAlert 触发的表单上设置标志: <form id="myForm" action="{{ route('acceptWallet') }}" method="POST" data-flag="0"> @csrf <input type="checkbox" id="btn-submit" name="wallet_checked"> <input type="submit" value="Submit"> </form> 然后你用JS触发它: const form = $('#myForm'); form.submit(function(e) { if (form.attr('data-flag') == 0) { e.preventDefault(); Swal.fire({ title: 'Attention!', text: 'Are you sure want to make this transaction', icon: 'warning', confirmButtonText: 'Yes', cancelButtonText: 'No', showCancelButton: true }).then((res) => { if(res.isConfirmed) { form.attr('data-flag', '1'); form.submit(); } }); } }); 如果您点击否,将会阻止提交表单 这样做。 复制此代码 <form class="sldier-form" action="{{ route('sliders.destroy', $slider->id) }}" method="post"> @csrf @method('DELETE') <button type="button" class="btn btn-danger btn-sm " onclick="sliderDelete()">delete</button> </form> // jquery 脚本 <script> function sliderDelete() { Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this!", type: 'warning', showCancelButton: true, customClass: { confirmButton: 'btn btn-success', cancelButton: 'btn btn-danger' }, buttonsStyling: false, confirmButtonText: 'Yes, delete it!' }).then((result) => { if (result.value == true) { $('.sldier-form').submit(); Swal.fire( 'Deleted!', 'Your file has been deleted.', 'success' ) } }) } </script> 与 ASPNet MVC 一起使用:- Swal.fire({ title: 'Title of the sweetalert ?', text: 'I'm using SweetAlert 2', icon: 'info', confirmButtonColor: '#3085d6', showCancelButton: true, cancelButtonColor: '#d33', confirmButtonText: 'Yes', cancelButtonText: 'No' }).then((isConfirm) => { console.log(isConfirm); if (isConfirm.isConfirmed === true) { //Logic in case the user hits Yes button } });
我在我的应用程序中使用它。我想使用如下所示的甜蜜警报。 斯瓦尔({ 标题:“你确定吗?”, text: "您要删除 "+ 姓名 +" 地址。", 我...
我在我的角度应用程序中使用 Sweet-alert。 函数从服务器获取数据(url){ SweetAlert.swal( { 标题: ””, 文本:“请稍等。”, 图片网址:“../../app/app-img/
好吧,首先,我对此很陌生。我被指示对我们项目中的警报使用 sweet Alert。我确信它会起作用,所以我在另一个文件上做了一个简单的文件,并做了一些类似的东西......
我已经尝试了两天多在模式引导程序中运行 SweetAlert 提示但没有成功,输入无法访问,我不明白为什么。我需要帮助。 $("#openSWA...
当地图全屏时,如何强制 Sweet Alert 2 在 Google 地图上触发?
我有一个使用 Google 地图的应用程序。我正在使用 Sweet Alert 2 进行 js 确认。只要 Google 地图不处于全屏模式,我就不会遇到触发 Sweet Alert 对话框的问题。