• Bootstrap 模态框Modal【前端Bootstrap框架】

    模态框Modal

    在这里插入图片描述

    模式框是覆盖父窗体的子窗体。通常，其目的是显示来自单独来源的内容，并且可以在不离开父窗体的情况下进行一些交互。子窗体可以提供信息、交互等。
    如果要单独引用此插件的函数，则需要引用modal js或者，如“bootstrap插件概述”一章所述，您可以参考BootstrapJS或bootstrap.min.JS的压缩版本。
    用法
    您可以切换模式插件的隐藏内容：
    通过数据属性：在控制器元素（如按钮或链接）上设置属性data toggle=“modal”，并设置数据目标=“\ identifier”或href=“\ identifier”以指定要切换的特定模式框（id=”identificate”）。
    通过javascript：使用这种技术，您可以通过一行简单的javascript调用id=“identifier”的模式框：
    $（‘#identifier’）。模式（选项）
    实例
    静态模式窗口的示例如以下示例所示：

    创建模态框（Modal）
    





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这里插入图片描述
    使用模式窗口时，需要有某种触发器。您可以使用按钮或链接。这里我们使用按钮。
    如果仔细查看上面的代码，您会发现在<按钮>选项卡中，数据目标=“\mymodal”是您要加载到页面上的模式框的目标。您可以在页面上创建多个模式框，然后为每个模式框创建不同的触发器。现在，很明显，您不能同时加载多个模块，但您可以在页面上创建多个模块并在不同时间加载它们。
    在模式框中需要注意两点：
    第一个是.Modal，用于将

    的内容识别为模态框。
    第二个是。淡出课堂。切换模式框时，会导致内容淡入淡出。
    Aria labelledby=“mymodal label”，此属性指模式框的标题。
    属性aria hidden=“true”用于保持模式窗口不可见，直到触发（例如单击相关按钮）。
    modal header是一个定义模式窗口标题样式的类。
    Class=“close”，close是一个CSS类，用于设置模式窗口的关闭按钮的样式。
    Data disass=“modal”是一个自定义HTML5数据属性。这里它用于关闭模式窗口。
    Class=“modal body”是引导CSS的一个CSS类，用于设置模式窗口主体的样式。
    Class=“modal footer”，引导CSS的一个CSS类，用于设置模式窗口底部的样式。
    Data toggle=“modal”，HTML5自定义数据属性Data toggle用于打开模式窗口。

    选项名称类型/默认值Data 属性名称描述
    backdropboolean 或 string 'static'
    默认值：true    		data-backdrop指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
    keyboardboolean
    默认值：true    		data-keyboard当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
    showboolean
    默认值：true    		data-show当初始化时显示模态框。
    remotepath
    默认值：false    		data-remote使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示： 
     data-toggle="modal" href="remote.html" data-target="#modal" rel="noopener noreferrer">请点击我
  • 相关阅读:
    Windows10 python3.11+pytorch2.01+cuda11.8安装与配置
    用echarts实现柱状图
    交换机的工作原理
    MarkText快捷键（随时补充中）
    C语言天花板——指针(初阶)
    「C++」深度分析C++中i++与++i的区别
    logstash/filebeat只接收最近一段时间的数据
    组合控件——底部标签栏——利用BottomNavigationView实现底部标签栏
    Python无废话-办公自动化Excel图表制作
    通过wordpress 自定义主题的额外CSS删除指定区块
  • 原文地址：https://blog.csdn.net/weixin_57198749/article/details/126065503