【问题标题】:How do you enable the escape key close functionality in a Twitter Bootstrap modal?如何在 Twitter Bootstrap 模式中启用转义键关闭功能?
【发布时间】:2012-09-19 18:10:03
【问题描述】:

我按照Twitter Bootstrap modal on their main documentation page
的说明操作并使用了提到的data-keyboard="true" 语法,但转义键没有关闭模式窗口。
还有什么我遗漏的吗?

代码:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal'>
  <div class='modal-body'>
    <div>Test</div>
  </div>
</div>

【问题讨论】:

  • 默认开启

标签: twitter-bootstrap


【解决方案1】:

让模态= []

        $(document).keyup(function(e) {
            if((e.key=='Escape' || e.key=='Esc' || e.keyCode==27) && modals.length) {
                $(".modal[modal='" + modals.pop() + "']").modal('hide')
            }
        })
        
        $(".modal").on("shown.bs.modal", e => {
            const id = modals.length
            modals.push(id)
            $(e.target).attr("modal", id)
        })

【讨论】:

    【解决方案2】:

    引导程序 3

    在 HTML 中,只需将 data-backdrop 设置为静态,data-keyboard 设置为 false

    示例:

    <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>
    

    $('#myModal').modal({
      backdrop: 'static',
      keyboard: false
    }) 
    

    现场测试:

    https://jsfiddle.net/sztx8qtz/

    了解更多:http://budiirawan.com/prevent-bootstrap-modal-closing/

    【讨论】:

    • 您的示例没有启用转义键
    【解决方案3】:

    看起来这是 keyup 事件绑定方式的问题。

    您可以将tabindex 属性添加到您的模态以解决此问题:

    tabindex="-1"
    

    所以你的完整代码应该是这样的:

    <a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>
    
    <div class='modal fade hide' id='my-modal' tabindex='-1'>
        <div class='modal-body'>
        <div>Test</div>
        </div>
    </div>
    

    有关更多信息,您可以查看this issue on github上的讨论

    (更新到新 TWBS 存储库的链接)

    【讨论】:

    • 这会阻止输入字段的自动对焦。
    • 如果您从多个位置调用对话框,您还可以将 data-keyboard 属性附加到您的 div.modal(并在调用者中省略它)。
    • 正如@nrek 在下面指出的那样 - 默认情况下关闭转义是真的,所以你并不严格需要 data-keyboard="true" - 它是 tabindex="-1" 启用行为
    • 我可以确认这个解决方案在 Bootstrap 4 中有效。我不知道为什么它在默认情况下不能像文档所说的那样工作。
    • 此外,data-keyboard 属于模态元素,而不是控制器。这可以通过将其设置为false来测试。
    【解决方案4】:

    tabindex="-1" 属性添加到模态div

    <div id="myModal" class="modal fade" role="dialog" tabindex="-1">
    
    </div>
    

    【讨论】:

      【解决方案5】:

      在角度我是这样使用的:

      var modalInstance = $modal.open({                        
       keyboard: false,
       backdrop: 'static',
       templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
       controller: 'currentlyIneligibleCtrl',
       resolve: {
           data: function () { return param; }
          }
      });
      
      • 背景:'static' => 点击外部时停止关闭
      • keyboard: false => 使用退出按钮停止关闭

      【讨论】:

        【解决方案6】:

        如果您通过 javascript 调用,也可以使用:

        $('#myModal').modal({keyboard: true}) 
        

        【讨论】:

        • 这曾经是您唯一需要做的事情,但现在您还需要确保您的 div 具有 'tabindex="-1"' 属性。
        • 我只需要设置标签索引。
        • @dhacke 那是因为键盘属性默认为真!所以只需设置 tabindex='-1'
        猜你喜欢
        • 1970-01-01
        • 2013-04-08
        • 2012-06-12
        • 2020-06-01
        • 2012-06-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-04-11
        相关资源
        最近更新 更多