bootstrap 模态框

你的名字 2022-08-01 02:50 365阅读 0赞

我们需要引入bootstrap.min.js

先创建模态框的触发装置：

<button class="btn btn-primary btn-lg" data-toggle="modal"
       data-target="#myModal">
       开始演示模态框
    </button>

data-toggle：插件，这里选择模态框。

data-target：定义模态框id的值。注意如果模态框的id="myModal"，那么data-target="\#myModal"

模态框：

<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>
    </div>

class="close" ,关闭的样式

data-dismiss：表示关闭，值model

class="modal-body",模态框主体样式

还有其余的插件，使用方法跟这个类似。

发表评论取消回复

表情：

评论列表（有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap模态框居中

API网址：http://www.runoob.com/bootstrap/bootstrap-button-plugin.html http://v

旧城等待，/ 2022年08月10日 09:28/ 0 赞/ 285 阅读

相关 bootstrap 模态框

我们需要引入bootstrap.min.js 先创建模态框的触发装置： <button class="btn btn-primary btn-lg" data-to

你的名字/ 2022年08月01日 02:50/ 0 赞/ 366 阅读

相关 Bootstrap模态框插件

> 模态框插件：交互式网站常见的弹框功能插件一、基本使用：使用模态框的弹窗组件需要三层div容器元素： modal（模态声明层） dialog（窗口声明层

缺乏、安全感/ 2022年06月12日 05:57/ 0 赞/ 351 阅读

相关 BootStrap（三）模态框

BootStrap（三）模态框模态框作为一个很重要的组件具体使用如下首先模态框的触发可能是一个按钮链接或一个事件 1.以按钮为例标签式触发定

太过爱你忘了你带给我的痛/ 2022年06月07日 09:48/ 0 赞/ 463 阅读

相关 bootstrap 模态框modal

1. 使用前提: 加载mode.js或bootstrap.js或压缩版的 bootstrap.min.js 2. 两种触发显示: 通过 data 属性：在控制器元素（

亦凉/ 2022年05月24日 10:17/ 0 赞/ 369 阅读

相关 Bootstrap之模态框

前言模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。用法

刺骨的言语ヽ痛彻心扉/ 2022年03月20日 06:58/ 0 赞/ 404 阅读

相关 bootstrap--模态框

复制即可运行. 小模态框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

╰半橙微兮°/ 2022年02月21日 07:47/ 0 赞/ 444 阅读

相关 bootstrap模态框-单击模态框之外不关闭

在模态框标签添加如下标签：data-backdrop="static" data-keyboard="false"  <div cl

系统管理员/ 2022年02月03日 12:17/ 0 赞/ 430 阅读

相关 bootstrap 模态框小案例

唤醒模态框这两个属性给谁添加，谁就能唤醒模态框，不一定是button使用 data-toggle=“modal” data-target="\myModal" --

迈不过友情╰/ 2021年07月25日 02:18/ 0 赞/ 512 阅读

相关 bootstrap模态框实例

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。实例：在这里我...

系统管理员/ 2021年05月03日 15:05/ 0 赞/ 686 阅读