SweetAlert Prompt issue in bootstrap modal

Question

I have been trying for more than two days to run SweetAlert prompt in a modal bootstrap without success, the input is not accessible and I don't understand why. I need help please.

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

Solution 1

Removing tabindex="-1" from myModal seems to do the job: Fiddle

The problem is tabindex, because if you set it to -1, you won't be able to access that element. More info here, and in this question.

Solution 2

Bootstrap modal has z-index=10001 in general. But Sweetalert modal has z-index=10000 or something less than bootstrap modal's z-index. So its always appear behind of bootstrap modal.

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

In my case, it works perfectly. I am using sweetalert: ^2.1.2

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

Please remember, don't try to change bootstrap modal z-index. Its a common scenario that Alert always appear on top of everything, even on top of modal. So, its a good practice changing sweetalert z-index.

Comments

[Manfred Radlwimmer]

Moved JS-Fiddle to SO Snippet

[Mathias Martin]

Thank you !! it's perfect !

[lch]

@MathiasMartin You're welcome!! Confirm the answer if it was helpful.

[Mark]

would you know how to code this solution for R Leonardo? i'm about to post a SO item asking for that fix

[Nanang Koesharwanto]

the input text in SweetAlert, is not witeable.

[Chidi-Nwaneto]

Thanks... That was all i needed.

[Twisted Whisper]

Please don't do this. The tabindex="-1" is there for a reason. The culprit is the Bootstrap's Modal event listener that instantly sets focus to the Modal if focus is given to an element that isn't inside it. You can just disable Bootstrap's Modal focus enforcement with $.fn.modal.Constructor.prototype._enforceFocus = function() {}; for Bootstrap 4.