sweetalert2 相关问题

一个响应式，可自定义，可访问（WAI-ARIA）替代JavaScript的弹出框，具有零依赖性。将此标记用于涉及使用此库的问题。

我有以下 html，带有 SweetAlert2 日期选择器弹出窗口，用于单击我！按钮： ...

html css bootstrap-5 sweetalert2 vanillajs-datepicker

回答 1 投票 0

我有以下带有 SweetAlert2 日期选择器弹出窗口的 html：我有以下 html 和 SweetAlert2 日期选择器弹出窗口： <!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/datepicker-bs5.min.css"> <link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css"> <style> .my-footer { background-color: #163b65; color: #ffffff; margin-top: 1.5em; height: 5em; padding: 1em; font-size: 80%; } .room-image { max-width: 50%; } .redText { color: red; } .notie-container { box-shadow: none; } </style>  <title>My nice page</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item">  <a class="nav-link active" aria-current="page" href="index.html">Home</a> </li> <li class="nav-item">  <a class="nav-link" href="/about.html">About</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Rooms </a> <ul class="dropdown-menu">  <li><a class="dropdown-item" href="generals.html">General's Quarters</a></li> <li><a class="dropdown-item" href="colonels.html">Colonel's Suite</a></li> <li><hr class="dropdown-divider"></li>  <li><a class="dropdown-item" href="paupers.html">Pauper's Shack</a></li> </ul> </li> <li class="nav-item">  <a class="nav-link" href="reservation.html">Make Reservation</a> </li> <li class="nav-item">  <a class="nav-link" href="contact.html">Contact</a> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <h1 class="mt-5">Search for Availability</h1> </div> </div>  <form action="reservation.html" method="get" class="needs-validation" novalidate id="date-picker"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"> <div class="mb-3"> <label for="start-date" class="form-label">Starting Date</label> <input required autocomplete="off" type="text" class="form-control" name="start-date" id="start-date" aria-describedby="start-date-help"> <small id="start-date-help" class="form-text text-muted">Enter your starting date</small> </div> </div> <div class="col-md-3"> <div class="mb-3"> <label for="end-date" class="form-label">Ending Date</label> <input required autocomplete="off" type="text" class="form-control" name="end-date" id="end-date" aria-describedby="end-date-help"> <small id="end-date-help" class="form-text text-muted">Enter your ending date</small> </div> </div> </div> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"> <button type="submit" class="btn btn-primary">Search Availability</button> </div> </div> </form>  <div class="row"> <div class="col"> <p id="myParagraph"> This is some text </p> <p> <button id="colorButton" class="btn btn-outline-secondary"> Click me! </button> </p> </div> </div> </div>  <div class="row my-footer"> <div class="col"> Left </div> <div class="col"> Middle </div> <div class="col"> Right </div> </div>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/datepicker-full.min.js"></script> <script src="https://unpkg.com/notie"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script> let attention = Prompt(); document.getElementById("colorButton").addEventListener("click", function(){ let html = ` <form action="" method="get" class="needs-validation" novalidate id="date-picker-modal"> <div class="row"> <div class="col-md"> <div class="mb-3"> <input disabled required autocomplete="off" type="text" class="form-control" name="start-date" id="start-date-modal" aria-describedby="start-date-help" placeholder="Start"> </div> </div> <div class="col-md"> <div class="mb-3"> <input disabled required autocomplete="off" type="text" class="form-control" name="end-date" id="end-date-modal" aria-describedby="end-date-help" placeholder="End"> </div> </div> </div> </form> `; attention.custom({msg: html, title: 'Choose your dates', width: 400}); }); // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); // vanilla JS date picker const elem = document.getElementById('date-picker'); const rangepicker = new DateRangePicker(elem, { // ...options format: 'dd-mm-yyyy', }); // notie alert function notify(msg, msg_type){ notie.alert({ type: msg_type, text: msg, stay: false, time: 3, position: 'top' }); }; function notifyModal(title, text, icon, confirmButtonText){ Swal.fire({ title: title, text: text, icon: icon, confirmButtonText: confirmButtonText }); }; // Prompt function Prompt(){ let toast = function(c){ const { msg = '', icon = 'success', position = 'top-end', } = c; const Toast = Swal.mixin({ toast: true, title: msg, position: position, icon: icon, showConfirmButton: false, timer: 3000, timerProgressBar: true, didOpen: (toast) => { toast.addEventListener('mouseenter', Swal.stopTimer) toast.addEventListener('mouseleave', Swal.resumeTimer) } }); Toast.fire({}); }; let success = function(c){ const { msg = '', title = '', footer = '', } = c; Swal.fire({ icon: 'success', title: title, text: msg, footer: footer }) }; let error = function(c){ const { msg = '', title = '', footer = '', } = c; Swal.fire({ icon: 'error', title: title, text: msg, footer: footer }) }; let custom = async function(c){ const { title = '', msg = '', width = '', } = c; const { value: formValues } = await Swal.fire({ title: title, html: msg, width: width, backdrop: false, focusConfirm: false, showCancelButton: true, willOpen: () => { const elem = document.getElementById('date-picker-modal'); const rangepicker = new DateRangePicker(elem, { format: 'dd-mm-yyyy', showOnFocus: true, }); }, preConfirm: () => { return [ document.getElementById('start-date-modal').value, document.getElementById('end-date-modal').value ] }, didOpen: () => { document.getElementById('start-date-modal').removeAttribute('disabled'), document.getElementById('end-date-modal').removeAttribute('disabled') } }); if (formValues) { Swal.fire(JSON.stringify(formValues)) }; }; return { toast: toast, success: success, error: error, custom: custom, } }; </script> </body> </html> 我想删除以某种方式自行显示的水平滚动条。我已经调查过scrollbarPadding，但似乎并非如此。我能做些什么来隐藏它？为什么它自己出现？ .scroll-hide::-webkit-scrollbar { display: none; } 创建一个全局类来隐藏任何标签上的滚动条。让我知道是否有帮助！

html css bootstrap-5 sweetalert2

回答 1 投票 0

SweetAlert 2和Internet Explorer

因此，基本上，我们正在使用SweetAlert2在我们的网站上。一切都在各种网络浏览器上运行良好，如Chrome，Firefox，Edge，除了Internet Explorer。一开始--几乎每个人都知道--... ...

javascript internet-explorer sweetalert2

回答 1 投票 0

如何将swal模式中的标题调整为左上角？

嗨，我已经开发的swell模态出现像我想要的输出出现像下面的图像是有反正减少按钮的大小，并把确认文本......

javascript html modal-dialog sweetalert sweetalert2

回答 1 投票 0

Sweet Alert在Swal.update中无法添加微调器。

我使用甜美的警报2和角度9（"sweetalert2"："^9.7.2 "在我的package.json）。我无法在Swal.update里面添加一个spinner（加载gif），这在Swal.fire上很容易，就像这样： ...

angular typescript sweetalert2

回答 1 投票 0

在confirmSweetAlert中禁用确认按钮。

我想在confirmSweetAlert中禁用确认按钮除非selectizeInput有一些输入的内容似乎有解决方法，通过使用Javascript，如swal.disableConfirmButton()和 ...

r shiny sweetalert2 shinyjs shinywidgets

回答 1 投票 0

SweetAlert2与Routify中的$beforeUrlChange：如何在丢失更改之前提示用户？

我想在用户退出页面之前设置一个简单的警告信息，这个方法很好用：$beforeUrlChange((event, store) => { return confirm("Beware! 你将失去你的记录，如果你......

sweetalert svelte sweetalert2

回答 1 投票 0

Sweetalert没有运行，我在它的TS文件上得到一个错误的信息

我给mainteinence的Angular 7.0.7和Node 10.20.1的应用程序。我工作得很好，我安装了很久以前Sweetalert和插件工作得很好。昨天，我的电脑重启，当我运行ng ...

angular typescript npm sweetalert2

回答 1 投票 0

Sweetalert 2-选择输入的排序选项

我有以下代码：this.getdata（（params .....）。then（（data）=> {var selectOptions = []; for（let i = 0; i

javascript reactjs sorting select sweetalert2

回答 1 投票 0

Django sweetify

django sweetalert sweetalert2

回答 1 投票 1

Sweetalert2：删除应用于元素的内联样式

我与sweetalert2一起使用Tailwindcss。并使用此配置生成警报：customClass：{... image：'hidden md：inline-block'，}，我使用ImageUrl进行警报配置。所以我的swal2-header ...

sweetalert2 tailwind-css

回答 1 投票 0

Sweetalert 2 JS在小型设备中无法正常工作

我有一个SweetAlert2警报弹出窗口，在桌面版本上运行良好，但在移动/小型设备中无法正常运行Swal.fire（{类型：'成功'，标题：...

javascript sweetalert sweetalert2

回答 1 投票 1

在onEachFeature传单之外调用函数

我想在应用于每个国家/地区的onEachFeature之外调用一个函数。我要声明的功能是Leaflet的click层上的PopUp（例如：如果单击France层，请调用...

javascript jquery leaflet geojson sweetalert2

回答 1 投票 0

我如何使用sweetalert2上传多个文件

我要上传多个文件，此代码仅选择一个文件进行上传const {value：file} = await Swal.fire（{title：'Select image'，input：'file'，inputAttributes：{'accept'： 'image / ...

javascript jquery sweetalert sweetalert2

回答 1 投票 0

在“然后”中显示验证消息，而不是自动关闭Swal

在预先确认获取后，then方法中的Sweetalert（2）是否可能未关闭？如果请求返回特定内容，我只想简单地打开Swal，但执行Swal...。

sweetalert2

回答 1 投票 0

Sweetalert2 React Content根本不起作用

我似乎无法使Swal2 React Content工作。我已经按照与指南相同的方式实现了它：https://www.npmjs.com/package/sweetalert2-react-content尽管我在...

reactjs typescript react-hooks sweetalert2

回答 2 投票 0

如何在Angular项目中使用sweetalert2黑暗主题？

我有一个角度为8的项目，我正在使用sweetalert2库来管理警报，但是我无法实现深色主题，出现了使用sweetalert2的默认主题，请从npm安装：...

angular sweetalert sweetalert2

回答 1 投票 0

sweetaler2目标opt-仍然在目标之外的swal

我在sweetalert2中尝试了目标选择，但是吐司仍然出现在目标外部，我在做什么错呢？这是代码#trial {position：absolute;显示：块；高度：200px； ...

javascript css sweetalert sweetalert2

回答 1 投票 1

如果在wealalert2 swal.fire内部发生其他情况，我怎么做？

我的表与其他字段表有关系（约束外键），因此单击此删除按钮时。它会显示出甜美的警报：如果连接了数据，则无法删除数据。这里是我的代码＆...

javascript php codeigniter sweetalert2

回答 1 投票 0

SweetAlert2模态关闭前确认（Bootstrap4）

你好，我的朋友你好吗？我有一个关于如何将“默认确认对话框”消息更改为SweetAlert2确认对话框的简单问题。我多次尝试了很多技巧，但是...

javascript jquery html bootstrap-4 sweetalert2

回答 1 投票 0

sweetalert2 相关问题

最新问题