SweetAlert 부트 스트랩 모달의 프롬프트 문제

-1

모달 부트 스트랩에서 SweetAlert 프롬프트를 성공적으로 실행하기 위해 2 일 이상 노력했습니다. 입력에 액세스 할 수 없으며 그 이유를 알 수 없습니다. 제발 도와주세요. myModal에서 tabindex="-1" 제거SweetAlert 부트 스트랩 모달의 프롬프트 문제

$("#openSWAL").click(function(){ 
 
\t 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>

는

출처

2017-04-19 Mathias Martin

JS-Fiddle을 SO 스 니펫으로 이동했습니다. –

일을 할 것 같다 : Fiddle

당신이 -1로 설정하면, 해당 액세스 할 수 없습니다 때문에 문제가 tabindex입니다 요소. 자세한 내용 here 및이 question에 있습니다.

출처

2017-04-19 12:38:20

감사합니다! 그것은 완벽 ! –

@MathiasMartin 환영합니다! 도움이 되었다면 대답을 확인하십시오. –

R Leonardo에 대해이 솔루션을 코딩하는 방법을 알고 있습니까? 나는 그 수정을 요구하는 SO 항목을 게시하려하고있다. – Mark

다음 코드가 도움이되기를 바랍니다. :)

<!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 계정에도 사용할 수 있습니다.

출처

2017-04-20 01:07:52 Ace

SweetAlert 부트 스트랩 모달의 프롬프트 문제

답변

관련 문제