SweetAlert提示問題在引導模式

-1

我一直試圖超過兩天運行SweetAlert提示在模式引導沒有成功，輸入不可訪問，我不明白爲什麼。我需要幫助。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小提琴移至SO片段 –

從myModal刪除tabindex="-1"似乎做的工作：Fiddle

問題是tabindex，因爲如果你把它設置爲-1，您將無法訪問元件。更多信息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提示問題在引導模式

回答

相關問題