Bootstrap modal box (Modal) plug-in


May 04, 2021 09:00 Bootstrap


Table of contents


Bootstrap Modal Box (Modal) plug-in

Modal boxes are sub-forms that are overwritten on the parent form. T ypically, the goal is to display content from a separate source, and there can be some interaction without leaving the parent form. Sub-forms provide information, interactions, and more.

Bootstrap modal box (Modal) plug-in If you want to reference the functionality of the plug-in separately, you need to refer to the .js. Or, as mentioned in the Bootstrap plug-in overview chapter, you can refer to bootstrap.js or the compressed version of Bootstrap.min .js.

Usage

You can switch the hidden contents of the Modal plug-in:

  • Specify a specific modal box to switch (with id"" "identifier") by setting the property data-toggle to "modal" on a controller element, such as a button or link, and setting a data-target to "#identifier" or a href to "#identifier".

  • JavaScript: With this technique, you can call a modal box with id"identifier" with a simple line of JavaScript:

    $('#identifier').modal(options)

Instance

An instance of a static modal window, as shown in the following example:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 模态框(Modal)插件</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><h2>创建模态框(Modal)</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" 
   data-target="#myModal">
   开始演示模态框</button><!-- 模态框(Modal) --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;            </button>
            <h4 class="modal-title" id="myModalLabel">
               模态框(Modal)标题            </h4>
         </div>
         <div class="modal-body">
            在这里添加一些文本         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭            </button>
            <button type="button" class="btn btn-primary">
               提交更改            </button>
         </div>
      </div><!-- /.modal-content --></div><!-- /.modal --></div></body></html>

The result is as follows:

Bootstrap modal box (Modal) plug-in

Code explained:

  • With modal windows, you need to have some kind of trigger. Y ou can use buttons or links. We're using buttons here.

  • If you look closely at the code above, you'll find that in the hashtag, the data-target""#myModal" is the target of the modal box you want to load on the page. Y ou can create multiple modal boxes on the page, and then create different triggers for each modal box. Now, obviously, you can't load multiple modules at the same time, but you can create multiple loads on the page at different times.

  • There are two points to note in the modal box:

  1. The first is .modal, which is used to identify the contents of the slt;div;gt; as modal boxes.

  2. The second is .fade class. When the modal box is switched, it causes the content to fade in and out.

  • aria-labeledby "myModalLabel", which refers to the title of the modal box.

  • The property aria-hidden"true" is used to keep the modal window invisible until the trigger is triggered (e.g. clicking on the relevant button).

  • The "modal-header" is a class that defines styles for the head of a modal window.

  • Class is "close" and close is a CSS class that styles the close buttons of the modal window.

  • data-dismiss is a custom HTML5 data property. Here it is used to close the modal window.

  • Class is a CSS class of Bootstrap CSS that styles the body of a modal window.

  • Class is a CSS class of Bootstrap CSS that styles the bottom of the modal window.

  • data-toggle is "modal" and the HTML5 custom data property data-toggle is used to open modal windows.

  • Options

    There are options for customizing the look and feel of Modal Windows, which are passed through the data property or JavaScript. The following table lists these options:

    选项名称 类型/默认值 Data 属性名称 描述
    backdrop boolean 或 string 'static'
    默认值:true
    data-backdrop 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。
    keyboard boolean
    默认值:true
    data-keyboard 当按下 escape 键时关闭模态框,设置为 false 时则按键无效。
    show boolean
    默认值:true
    data-show 当初始化时显示模态框。
    remote path
    默认值:false
    data-remote 使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容。如下面的实例所示:
    <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

    Method

    Here are some useful ways to work with modal().

    方法 描述 实例
    Options: .modal(options) 把内容作为模态框激活。接受一个可选的选项对象。
    $('#identifier').modal({keyboard: false})
    Toggle: .modal('toggle') 手动切换模态框。
    $('#identifier').modal('toggle')
    Show: .modal('show') 手动打开模态框。
    $('#identifier').modal('show')
    Hide: .modal('hide') 手动隐藏模态框。
    $('#identifier').modal('hide')

    Instance

    The following example demonstrates the use of the method:

    <!DOCTYPE html><html><head>
       <title>Bootstrap 实例 - 模态框(Modal)插件方法</title>
       <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
       <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
       <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><h2>模态框(Modal)插件方法</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       开始演示模态框</button><!-- 模态框(Modal) --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                   aria-hidden="true">×            </button>
                <h4 class="modal-title" id="myModalLabel">
                   模态框(Modal)标题            </h4>
             </div>
             <div class="modal-body">
                按下 ESC 按钮退出。         </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default" 
                   data-dismiss="modal">关闭            </button>
                <button type="button" class="btn btn-primary">
                   提交更改            </button>
             </div>
          </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog --></div><!-- /.modal --><script>
       $(function ({ $('#myModal').modal({
          keyboard: true
       })});</script></body></html>

    The result is as follows:

    Bootstrap modal box (Modal) plug-in

    Simply click on the ESC key and the modal window exits.

    Event

    The following table lists the events to be used in the modal box. These events can be used as hooks in functions.

    事件 描述 实例
    show.bs.modal 在调用 show 方法后触发。
    $('#identifier').on('show.bs.modal', function () {
      // 执行一些动作...})
    shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。
    $('#identifier').on('shown.bs.modal', function () {
      // 执行一些动作...})
    hide.bs.modal 当调用 hide 实例方法时触发。
    $('#identifier').on('hide.bs.modal', function () {
      // 执行一些动作...})
    hidden.bs.modal 当模态框完全对用户隐藏时触发。
    $('#identifier').on('hidden.bs.modal', function () {
      // 执行一些动作...})

    Instance

    The following example demonstrates the use of events:

    <!DOCTYPE html><html><head>
       <title>Bootstrap 实例 - 模态框(Modal)插件事件</title>
       <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
       <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
       <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><h2>模态框(Modal)插件事件</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       开始演示模态框</button><!-- 模态框(Modal) --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                   aria-hidden="true">×            </button>
                <h4 class="modal-title" id="myModalLabel">
                   模态框(Modal)标题            </h4>
             </div>
             <div class="modal-body">
                点击关闭按钮检查事件功能。         </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default" 
                   data-dismiss="modal">
                   关闭            </button>
                <button type="button" class="btn btn-primary">
                   提交更改            </button>
             </div>
          </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog --></div><!-- /.modal --><script>
       $(function () { $('#myModal').modal('hide')})});</script><script>
       $(function () { $('#myModal').on('hide.bs.modal', function () {
          alert('嘿,我听说您喜欢模态框...');})
       });</script></body></html>

    The result is as follows:

    Bootstrap modal box (Modal) plug-in

    As the example above shows, if you click the Close button, the hide event, a warning message is displayed.