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提示问题在引导模式

回答

相关问题