twitter-bootstrap-3 - 引导模式中的 SweetAlert 提示问题

标签 twitter-bootstrap-3 bootstrap-modal prompt sweetalert

我已经尝试在模式 bootstrap 中运行 SweetAlert 提示超过两天没有成功,输入不可访问,我不明白为什么。我需要帮助。

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

最佳答案

删除 tabindex="-1"来自 myModal似乎可以完成这项工作:Fiddle

问题是tabindex ,因为如果你把它设置为 -1 ,您将无法访问该元素。
更多信息 here ,并在此 question .

关于twitter-bootstrap-3 - 引导模式中的 SweetAlert 提示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43490281/

相关文章:

javascript - 使用 Javascript 在没有提示的情况下在 Photoshop 中保存文件?

twitter-bootstrap - Bootstrap 3 .row 与侧边栏对齐

html - 无法点击平板电脑/手机宽度的输入

jquery - Bootstrap 模态动态内容

BASH 命令提示符 : add characters behind command

JavaScript 每天提示一次

html - Bootstrap 模态问题

javascript - Bootstrap模态警报框中根据Timing设置自动弹出窗口警报框

html - 模态响应 Bootstrap

Angular 6 - Bootstrap - 如何捕获模式对话框关闭事件?