ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

《前端》Bootstrap模态框(Modal)插件

2020-02-01 20:39:56  阅读:313  来源: 互联网

标签:模态 插件 Modal Bootstrap modal bs identifier data


模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。使用前需要引用 bootstrap.js或压缩版的bootstrap.min.js

如果想要单独引用该插件的功能,那么您需要引用modal.js。详细可见https://www.runoob.com/bootstrap/bootstrap-plugins-overview.html

用法:

切换模态框(Modal)插件的隐藏内容:

  • 通过data属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal",同时设置data-target="#identifier"href="#identifier"来指定要切换的特定的模态框(带有id="identifier")。
  • 通过JavaScript:使用这种技术,您可以通过简单的一行JavaScript来调用带有id="identifier"的模态框:
    $('#identifier').modal(options)
    实例:一个静态的模态窗口实例,如下面的实例所示:
    <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Bootstrap 实例 - 模态框(Modal)插件</title>
            <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></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>

代码讲解:

  • 使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
  • 从上面的代码会发现在<button>标签中,data-target="#myModal"是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载。
  • 在模态框中需要注意两点:
  1. 第一是.modal,用来把<div>的内容识别为模态框。
  2. 第二是.fade class。当模态框被切换时,它会引起内容淡入淡出。
  • aria-labelledby="myModalLabel",该属性引用模态框的标题。
  • 属性aria-hidden="true"用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
  • <div class="modal-header">,modal-header是为模态窗口的头部定义样式的类。
  • class="close",close是一个CSS class,用于为模态窗口的关闭按钮设置样式。
  • data-dismiss="modal",是一个自定义的HTML5 data属性。在这里它被用于关闭模态窗口。
  • class="modal-body",是Bootstrap CSS的一个 CSS class,用于为模态窗口的主体设置样式。
  • class="modal-footer",是Bootstrap CSS的一个CSS class,用于为模态窗口的底部设置样式。
  • data-toggle="modal",HTML5 自定义的 data 属性 data-toggle用于打开模态窗口。

选项:

有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data属性或JavaScript来传递的。下表列出了这些选项:

选项名称

类型/默认值

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"   rel="noopener  noreferrer">请点击我</a>

 

方法:下面是一些可与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')

例子:只需要点击 ESC 键,模态窗口即会退出。

    <!--      例2      -->
    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 模态框(Modal)插件方法</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></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      -->

    </body>

    </html>

事件:

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件

描述

实例

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  ()  {

    //  执行一些动作...

})

 

bellediao 发布了32 篇原创文章 · 获赞 53 · 访问量 5万+ 私信 关注

标签:模态,插件,Modal,Bootstrap,modal,bs,identifier,data
来源: https://blog.csdn.net/bellediao/article/details/104137859

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有