Question

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

Answer 1

Bootstrap模态通常具有z-index = 10001。但是Sweetalert模态的z-index = 10000或小于引导模态的z-index。因此，它总是出现在引导程序模式的后面。

赋予您的SweetAlert模态比引导模态更高的z索引。问题将会解决。

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

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

请记住，请勿尝试更改引导程序模式Z-index。这是一个常见的情况，即Alert总是出现在所有内容之上，甚至出现在模式之上。因此，更改sweetalert z-index是一个好习惯。

Answer 2

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

Answer 3

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

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

Answer 4

我们将错误返回给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"); }
        });
    })

Answer 5

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

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

Answer 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帐户也可以使用。

bootstrap模态

6 个答案: