SweetAlert 引导模式中的提示问题

问题描述 投票：0回答：8

我已经尝试了两天多在模式引导中运行 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>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    Bla<br/>
    
      </div>
      <div class="modal-footer">
        <button type="button" id="openSWAL" class="btn btn-warning">Open SweetAlert prompt</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

twitter-bootstrap-3 bootstrap-modal prompt sweetalert
8个回答
18
投票

从

tabindex="-1"
中删除
myModal
似乎可以完成这项工作：Fiddle

问题是

tabindex
，因为如果你将其设置为
-1
，你将无法访问该元素。 更多信息这里，以及这个问题。

2
投票

Bootstrap modal 一般情况下 z-index=10001。但 Sweetalert 模态的 z-index=10000 或小于 bootstrap modal 的 z-index。所以它总是出现在引导模式的后面。

为您的 SweetAlert 模态提供比 bootstrap 模态更高的 z-index。 问题就会解决。

就我而言，它运行得很好。我正在使用sweetalert：^2.1.2

.swall-overlay {
    z-index: 100005;
}
.swal-modal {
    z-index: 99999;
}

请记住，不要尝试更改 bootstrap 模态 z-index。警报总是出现在所有内容之上，甚至是模态之上，这是一种常见的情况。所以，改变 sweetalert z-index 是一个很好的做法。

0
投票

我们在出错时发回 JSON 错误对象，并在 SWAL 弹出窗口中显示该对象。问题是用户无法选择文本。

问题似乎出在 

tabindex
html 属性中。我们将通过 
didRender
事件删除它（在旧版本的 sweetalert2 中正式为 
onRender
）。

（我们通过 cdnjs 使用 [电子邮件受保护]）

   $.ajax({ /* stuff */
   }).fail(function(result) {
        var data = $.parseJSON(result.responseText);

        var text = 'Something went wrong!';
        if (data && data.hasOwnProperty('message')) {
            text = '<div class="swal2-error-message">' + data.message + '</div>';
        }

        Swal.fire({
            icon: 'error',
            title: 'Encountered the following exception',
            html: text,
            width: 850,
            // swal is broken by design, this will allow you to select text in the above error div.
            didRender: function(x) { $(".swal2-popup.swal2-modal").removeAttr("tabindex"); }
        });
    })
0
投票

希望一切顺利，我遇到了类似的问题，我正在调用引导模式弹出窗口，在该弹出窗口中我使用 swal 警报从用户那里获取输入。我面临的问题是我无法在 swal 输入框中输入任何内容。这是因为模态背景屏蔽覆盖在 swal 警报之上，因此阻止我使用 swal 警报。我的解决方案很简单，我隐藏模态背景屏蔽，当我完成 swal 警报时，我重新显示它。好的，我正在 asp.net mvc 上使用它。

引导模态

//                              |   
//                              \/     
<div class="modal fade" id="UpdateModal" tabindex="-1" aria-labelledby="UpdateModalLabel" aria-hidden="true">
    <div id="GradeWiseViewModal" class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
           
            <div class="modal-body" id="modal-body">

            </div>
            
        </div>
    </div>
</div>

id= UpdateModal 的 div 覆盖在 swal 警报上，所以我需要将其删除并将其带回来，这样我就不会在此过程中丢失任何数据。因此需要修改下面给出的调用 swal 警报的函数。

<script>
function abc(a,b,c) {
       
         $('#UpdateModal').hide();
         swal({
             text: 'Please Provide value\'s Label',
             content: "input",
             button: {
                 text: "Add value",
                 closeModal: true,
             },
         })
     .then(head => {
         if (!head) throw null;
         $.ajax({
             url: "/address/actionresult",
             cache: false,
             type: 'Post',
             data: { 'a': a, 'b': b, 'c': c },
             success: function (res) {
                 OpenModal(sid, gid, bid, 'DSCollapse');
                 $('#UpdateModal').show();
             }
         });
     })
         .catch(err => {
             if (err) {
                 swal("Oh noes!", "The AJAX request failed!", "error");
             } else {
                 swal.stopLoading();
                 swal.close();
                 $('#UpdateModal').show();
             }
         });
        // $('#UpdateModal').show();  //<==== this is a no no... 
     }
</script>

当函数调用 abc(1,2,3) 时，它将隐藏覆盖的 div 

$('#UpdateModal').hide()
；一旦 swal 警报完成工作并发送数据，调用成功后我们会显示 MODAL 
$('#UpdateModal').show();

简而言之

$('#UpdateModal').hide()  <-----------------------------------
SWAL({}).THEN({ 
AJAX ({ 
       success:FUNCITON(){ 
                         $('#UpdateModal').SHOW()  <----------
         } 
       }); 
  });

记住不是解决方案，只是修复。
希望这能消除您的头痛。

0
投票

我在模态 div 上设置了 data-bs-focus="false"，这对我有用。

-1
投票

您通常可以通过使用 

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

禁用焦点强制来解决引导模式焦点问题
-1
投票

将此行放入您的第一个模态中

$(document).off('focusin.modal');
-2
投票

希望以下代码对您有所帮助。 :) 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <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>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Open modal
    </button>
    <!-- End of button trigger modal -->
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">                    
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" onclick="adddata()">Add</button>
                    <button type="button" class="btn btn-default" onclick="modalclose()">Close</button>
                    <button type="button" class="btn btn-primary" onclick="savechanges()">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
function adddata() {
    $('#myModal').modal('hide');
    swal({
        title: "An input!",
        text: "Write something interesting:",
        type: "input",
        showCancelButton: true,
        closeOnConfirm: false,
        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");
    });
}

function modalclose() {
    swal({
            title: "Are you sure you want to exit?",
            text: "You will not be able to save and recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes, I'm going out!",
            cancelButtonText: "No, I'm stay!",
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function(isConfirm) {
            if (isConfirm) {
                swal("Goodbye!", "Your imaginary file has not been save.", "success");
                $('#myModal').modal('hide');
            } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error");
            }
        });
}

function savechanges() {
    $('#myModal').modal('hide');
    swal("Good job!", "Your imaginary file has been successfully save!", "success");
}
</script>

我的 JSFiddle 帐户也可以使用此功能。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.