引导模式中的 SweetAlert 提示问题答案

【问题标题】：SweetAlert Prompt issue in bootstrap modal引导模式中的 SweetAlert 提示问题
【发布时间】：2017-04-19 08:23:27
【问题描述】：

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

【问题讨论】：

将 JS-Fiddle 移至 SO Snippet

标签： twitter-bootstrap-3 bootstrap-modal prompt sweetalert

【解决方案1】：

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

问题是tabindex，因为如果您将其设置为-1，您将无法访问该元素。更多信息here，在此question。

【讨论】：

谢谢！！太完美了！
@MathiasMartin 不客气！！如果有帮助，请确认答案。
您知道如何为 R Leonardo 编写此解决方案吗？我即将发布一个请求修复的 SO 项目
SweetAlert 中的输入文本不可写。
谢谢...这就是我所需要的。

【解决方案2】：

Bootstrap modal 通常具有 z-index=10001。但是 Sweetalert modal 的 z-index=10000 或小于 bootstrap modal 的 z-index。所以它总是出现在引导模式的后面。

为 SweetAlert 模态提供比引导模态更高的 z-index。问题会解决的。

就我而言，它运行良好。我正在使用 sweetalert: ^2.1.2

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

请记住，不要尝试更改引导模式 z-index。警报总是出现在所有内容之上，甚至在模态之上，这是一个常见的场景。因此，更改 sweetalert z-index 是一个很好的做法。

【讨论】：

【解决方案3】：

您通常可以通过使用 $.fn.modal.Constructor.prototype.enforceFocus = function () {}; 禁用焦点强制来解决引导模式焦点问题

【讨论】：

【解决方案4】：

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

$(document).off('focusin.modal');

【讨论】：

【解决方案5】：

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

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

（我们通过 cdnjs 使用 limonte-sweetalert2@10.3.5）

   $.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"); }
        });
    })

【讨论】：

【解决方案6】：

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

<!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 帐户中使用。

【讨论】：