标签: sweetalert

我想在甜蜜警报中实现一个表单。我只能在其中输入一个标题和正文。

文档说，有一种自定义警报的方法，但是不允许从我的框架（customizecss.com）或从style.css加载类css3。

我正在尝试通过以下方式在警报中包含输入：

swal({
       title: "HTML <small>Title</small>!",
       text: "<input type='text'><label class='my-label'>Name</label>",
       html: true 
});

而且它不起作用，仅显示标签...为什么？

我想知道是否有某种方法可以做到...

谢谢！

甜蜜警报-> https://github.com/t4t5/sweetalert

请帮我理解这一点。

我创建了一个 ListView，显示来自 SQL 数据库的数据。我启用了插入、编辑和删除功能，一切正常。

我想要什么？

我想用来SweetAlert提示用户确认是/否是否要从 ListView 中删除条目。

我做了什么？

首先，我尝试使用“内置”功能，我添加OnClientClick="return confirm('are you sure')"到<asp:Button/>调用给定 ListView 条目的删除。那行得通！当我点击是它删除，没有它没有。除了添加上述内容之外，我无需执行任何其他操作。但这不是我想要的。我想要SweetAlert显示鸽友，问题就在这里开始了。

其次，我认为我可以简单地创建SweetAlert脚本并从按钮调用它的函数名称。但是，这样做时，它确实打开了，SweetAlert但在我什至有机会单击是和否之前，它已经删除了该项目并关闭了框。

<script>
    function deletealert()
    {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary   file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel plx!",
            closeOnConfirm: false,
            closeOnCancel: false                   
        },
        function (isConfirm) {
            if …

我目前正在使用 sweetalert2 从对话框中捕获用户的输入。我想在链接队列对话框中使用下拉菜单，但我似乎找不到在下拉列表中动态添加项目的方法。假设我想从 JSON 格式中检索数据并将其放入下拉列表中，有没有办法做到这一点？

function userInput() {
    swal.setDefaults(
        {
            showLoaderOnConfirm: true,
            confirmButtonText: 'Next →',
            showCancelButton: true,
            animation: true,
            progressSteps: ['1', '2', '3']
        }
    );

    var steps = [
        {
            text: 'Select an author to analyze the commit',
            input: 'select',
            inputOptions: {
                'SRB': 'Serbia',     // How do I dynamically set value?
                'UKR': 'Ukraine',
                'HRV': 'Croatia'
            }
        },
        {
            text: 'Select multiple authors to compare their commits',
            input: 'select',
            inputOptions: {
                'SRB': 'Serbia',      // How do I dynamically set value?
                'UKR': …

我已经尝试在模式引导程序中运行 SweetAlert 提示超过两天没有成功，输入不可访问，我不明白为什么。我需要帮助。

$("#openSWAL").click(function(){
	swal({
    title: "An input!",
    text: "Write something interesting:",
    type: "input",
    showCancelButton: true,
    closeOnConfirm: false,
    animation: "slide-from-top",
    inputPlaceholder: "Write something"
  },
       function(inputValue){
    if (inputValue === false) return false;

    if (inputValue === "") {
      swal.showInputError("You need to write something!");
      return false
    }

    swal("Nice!", "You wrote: " + inputValue, "success");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Open modal
</button> …

这是我正在处理的代码

   swal({
                title: "Confirm details?",
                text:'<input id="datetimepicker" class="form-control" autofocus>',
                type: "warning",
                customClass: 'swal-custom-width',
                html:true,
                showCancelButton: true,
                confirmButtonClass: "btn-success",
                confirmButtonText: "Confirm",
                cancelButtonText: "Cancel",
                closeOnConfirm: false,
                closeOnCancel: false,
                showLoaderOnConfirm: true
            },

我想在甜蜜警报的输入中设置日期时间选择器。

$('#datetimepicker').datetimepicker({
    format: 'DD/MM/YYYY hh:mm A',
    defaultDate: new Date()
});

当我单击甜蜜警报时，输入字段无法单击或对其执行任何操作。日期也没有出现。任何人都可以告诉我出了什么问题？谢谢。

单击输入选择日期时出现控制台错误

Uncaught RangeError: Maximum call stack size exceeded.
at HTMLDivElement.trigger (jquery-2.2.3.min.js:3)
at Object.trigger (jquery-2.2.3.min.js:4)
at HTMLDivElement.<anonymous> (jquery-2.2.3.min.js:4)
at Function.each (jquery-2.2.3.min.js:2)
at n.fn.init.each (jquery-2.2.3.min.js:2)
at n.fn.init.trigger (jquery-2.2.3.min.js:4)
at c.<anonymous> (bootstrap.min.js:6)
at HTMLDocument.f (jquery-2.2.3.min.js:2)
at HTMLDocument.dispatch (jquery-2.2.3.min.js:3)
at HTMLDocument.r.handle (jquery-2.2.3.min.js:3)

我正在尝试对表单中的一个字段执行验证。

只有当该字段的值存在时，我才能调用 API，否则将抛出错误消息。

我尝试了 SweetAlert2 网站上的各种示例。我只想要对其中一个字段的验证。

Swal.fire({
        title: 'Are you sure you want to Save the Notes?',
        type: 'info',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes'
      }).then((result) => {

      console.log('result.value',result.value);
        if (result.value) {
          Swal.fire( {
            title: 'Download Notes',
              html:"<div class='b'><p>ID</p></div><input id='swal-input2' class='swal2-input' required/><div class='b'><p>Notes</p></div><input id='swal-input1' class='swal2-input' autofocus minlength='500' >",
            confirmButtonText: 'Save',
            preConfirm: (login) => {
              console.log('document.getElementById(swal-input2).value',document.getElementById('swal-input2').value);
              request_string = {
        "Request":
          [
            {
              "Col1": "value1",
              "Col1": "value2",
              "Col1": document.getElementById('swal-input2').value,
              "Col1": document.getElementById('swal-input1').value,

            }
          ]
      };
             fetch('API_URL', {
        headers: {
          'Accept': 'application/json, …

我正在使用 PHP 和用于删除确认的甜蜜警报。问题是它在显示甜蜜警报之前正在删除。

这是我的 HTML（其中使用了 PHP）。

<div class="delete"><a onclick="return confirmation()" href="'.URLROOT.'/dashboards/delete_note/'.htmlspecialchars($note->note_id).'/'.$data['table'] .'"><i class="far fa-trash-alt"></i></a></div>

这是我的甜蜜警报

function confirmation() {
swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

}

问题是，它没有显示甜蜜的警报，它只是直接转到 URL。我需要做一个表格并防止提交或类似的东西吗？

我正在尝试在我的 angular 项目中使用甜蜜警报。

这就是我使用甜蜜警报的方式：

import swal from 'sweetalert';

swal({
    title: "Problem",
    text: "Try again later!",
    icon: "error"
  })

我收到以下错误：

node_modules/sweetalert/typings/sweetalert.d.ts(4,9) 中的错误：错误 TS2403：后续变量声明必须具有相同的类型。变量 'swal' 的类型必须是 'typeof import("C:/Users/user/Desktop/University/Thesis/workspace/web/myProject/project/node_modules/sweetalert/typings/sweetalert")'，但这里有类型 '甜蜜警报'。

任何人都可以帮助我吗？

如何更改 Sweetalert 中的字体系列？谢谢你

swal({
            title: "Are you sure?",
            text: "Your will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel plx!",
            closeOnConfirm: false,
            closeOnCancel: false
        },

我正在使用 codeigniter 和 VueJs 以及甜蜜警报 javascript 库进行小型项目。但是ReferenceError: "Swal is not defined"一旦我swall.fire({})在我的 VueJs 方法中调用，我的控制台就会出错。 这是我的代码：

deleteCustomers(customer_id){
        Swal.fire({
           title: 'Are you sure?',
           text: "You won't be able to revert this!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#d33',
           confirmButtonText: 'Yes, delete it!'
           }).then((result) => {
              axios.post('/Thirdparty/deleteCustomers', {id : customer_id}).then(function(response){
                 console.log(response.data);
                 //alert(response.data.error);
                 Swal.fire(
                 'Deleted!',
                 'Your file has been deleted.',
                 'success'
                 );
              });
           });
     }

当然，我已经使用以下方法导入了 swall： import Swal from 'sweetalert2';

注意：swall.fire 不仅在 Vuejs 方法中起作用