如何在Twitter Bootstrap中使用模态关闭事件

如何在Twitter Bootstrap中使用模态关闭事件

Bootstrap Modals提供了一个轻量级的、多用途的JavaScript弹出窗口,可定制且反应灵敏。它们可以用来在网站中显示警报弹出窗口、视频和图片。Bootstrap Modals分为三个主要部分:标题、正文和页脚。

语法:

class | tabindex | role | aria-labelledby

方法:它显示了带有标题、正文和页脚的弹出式菜单,以及关闭和提交按钮。

<div class="modal fade" 
     id="exampleModal" 
     tabindex="-1" 
     role="dialog" 
     aria-labelledby="exampleModalLabel" 
     aria-hidden="true">
    <div class="modal-dialog" role="document">
    </div>
</div>

解释:下面是一个静态模态的例子(意味着它的位置和显示已经被覆盖),包括模态标题、模态主体(需要填充)和模态页脚(可选)。我们要求你在可能的情况下将模态头与解雇动作包括在一起,或者提供另一个明确的解雇动作。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title></title>
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
            integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
            crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
            integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
            crossorigin="anonymous"></script>
</head>
  
<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" 
            data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>
  
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1"
         role="dialog" aria-labelledby="exampleModalLabel" 
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLabel">
                      Modal title
                  </h5>
                    <button type="button" class="close" 
                            data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" 
                            data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">
                      Save changes</button>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

输出:
如何在Twitter Bootstrap中使用模态关闭事件?

支持的浏览器:它支持在Flex布局。

  • Chrome: Yes
  • Firefox: Yes (63.0)
  • Edge: No
  • 互联网浏览器。No

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程