SweetAlertブートストラップ・モーダルでのプロンプトの問題

-1

SweetAlertのプロンプトをモーダル・ブートストラップで実行するのに2日以上をかけていましたが、入力はアクセスできず、理由を理解できません。私は助けてください。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スニペットに移動 –

myModalからtabindex="-1"を削除すると、仕事をするようだ：あなたは-1に設定した場合、あなたはそれにアクセスすることができなくなりますので、Fiddle

問題は、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ブートストラップ・モーダルでのプロンプトの問題

答えて

関連する問題