bootstrap 模态中的 SweetAlert 提示问题

Question

我已经尝试了两天多运行 SweetAlert 提示模式 bootstrap 但没有成功，输入无法访问，我不明白为什么。我需要帮助。

$("#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>

Answer 1

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

问题是 tabindex，因为如果将其设置为 -1，您将无法访问该元素。更多信息 here, and in this .

Answer 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 帐户。

Answer 3

Bootstrap模态一般有z-index=10001。但是 Sweetalert 模态有 z-index=10000 或小于 bootstrap 模态的 z-index。所以它总是出现在bootstrap模态后面。

Give your SweetAlert modal higher z-index than bootstrap modal. Problem will be solved.

就我而言，它工作得很好。我正在使用 sweetalert: ^2.1.2

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

请记住，不要试图改变bootstrap模态z-index。这是一个常见的场景，Alert 总是出现在所有内容之上，甚至出现在模态之上。所以，改变 sweetalert z-index.

是个好习惯

Answer 4

您通常可以通过使用 $.fn.modal.Constructor.prototype.enforceFocus = function () {};

禁用焦点实施来解决 bootstrap 模态焦点问题

Answer 5

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

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

Answer 6

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

问题似乎出在 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"); }
        });
    })

bootstrap 模态中的 SweetAlert 提示问题

SweetAlert Prompt issue in bootstrap modal

prompt

bootstrap-modal

twitter-bootstrap-3

sweetalert