前端Bootstrap中modal常用用法

news2024/10/1 12:10:25

1.打开官网

Modal · Bootstrap v5.1 | Bootstrap官方文档中国镜像

2.选择组件

说明:Components下的modal 

 3.选择喜欢的样式

说明:本次选择的是Live demo,为了展示更多的可操作性,本次将不用上面的Button trigger modal,采用的是自己创建并触发。

4. 粘贴到html文件

说明:我修改了id为了后面初始化modal(目的是增加可操作性)

    <!-- 预览模态框 -->
    <div
      class="modal fade"
      id="preview"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">...</div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

5.点击Via JavaScript 

 

6. 初始化

说明:上面我已经修改过了id,因此用preview获取。

// 初始预览模态框
var preview = new bootstrap.Modal(document.getElementById('preview'))

7. 点击切换转态
说明:来回切换show,hide。

8.演练

说明:为预览绑定了点击事件

    preview.toggle()

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/836721.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

K8S 部署 RocketMQ

文章目录 添加模板部署本地访问 集群使用 kubesphere 作为工具 添加模板 添加 helm 模板 helm repo add rocketmq-repo https://helm-charts.itboon.top/rocketmq helm repo update rocketmq-repo编写 value.yaml 文件 配置主从节点的个数&#xff0c;例子为单节点 broker:…

java-IDEA MAVEN查看依赖树,解决jar包重复和冲突

如果这里面的依赖关系有红线,就说明有包冲突,一般都是版本不一致,可以在idea里下一个插件Maven Helper,点击install并重启IDEA 打开pom.xml文件&#xff0c;在下方会出现Dependency Analyzer&#xff0c;选择它会出现重复依赖列表&#xff0c;选择对应的依赖&#xff0c;右键红…

微信开发之定时发送朋友圈的技术实现

请求URL&#xff1a; http://域名地址/snsSend 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是String登录实例标识content是String文…

FFmpeg解码详细流程

介绍 FFmpeg的 libavcodec 模块完成音视频多媒体的编解码模块。老版本的 FFmpeg 将avcodec_decode_video2()作为视频的解码函数 API&#xff0c;将avcodec_decode_audio4()作为音频的解码函数 API&#xff1b;从 3.4版本开始已经将二者标记为废弃过时 API&#xff08;attribut…

java.util.LinkedList 中的pop() poll() peek()三个方法的区别

先说结果&#xff1a; /** 这两个方法底层调用的都是 unlinkFirst () 这个方法** pop这个方法是通过removeFirst() 在去调用的unlinkFirst();* poll() 是直接调用的unlinkFirst();** 而 removeFirst() 这个方法&#xff0c;在头结点为空的时候会报NoSuchElementException();** …

re学习(27)攻防世界toddler_regs(字符串函数总结+交叉引用)

找不到main&#xff08;&#xff09;函数&#xff0c;查找字符串&#xff0c;发现特殊字符串 定位字符串出现的位置&#xff0c;反汇编出代码&#xff0c;进行分析“ flag{Xp0int_1s_n1c3_but_Xp0intJNU_is_we1rd} 总结 一.CP&#xff1a;shiftF12 展示所有的字符串; ctrlx查…

深度学习里面为什么喜欢用对数

1.这样可以简化计算并提高稳定性&#xff0c;有着相同的临界点 2.由P(A).P(B)给出两个独立事件A和B共同出现的概率。如果我们使用log&#xff0c;即log(P(A)) log(P(B))&#xff0c;这很容易映射到一个和。因此&#xff0c;更容易将神经元触发的“事件”作为线性函数来处理。…

对于数据库查询索引和查字典索引的理解

之前面试问过我对于数据库索引的理解&#xff0c;这个问题不是具体的问题太宽泛&#xff0c;面试官也没进行引导&#xff0c;我不知道怎么回答&#xff0c;下面是结合查字典进行理解。 查字典 拿查字典举例&#xff0c;知道一个字怎么写但是不知道具体的意思以及发音&#xff…

6.如何用CSV文件生成异构图数据集

我们将使用GroupLens研究小组收集的MovieLens数据集。 这个数据集描述了MovieLens的五星评级和标记活动。该数据集包含来自600多名用户的9000多部电影的约10万个评分。我们将使用该数据集生成两种节点类型&#xff0c;分别保存电影和用户的数据&#xff0c;以及一种连接…

【我们一起60天准备考研算法面试(大全)-第三十四天 34/60】【前缀和】【北邮】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09;   文章字体风格&#xff1a; 红色文字表示&#…

【Linux】Linux下git的使用

文章目录 一、什么是git二、git发展史三、Gitee仓库的创建1.新建仓库2.复制仓库链接3.在命令行克隆仓库3.1仓库里的.gitignore是什么3.2仓库里的git是什么 三、git的基本使用1.将克隆仓库的新增文件添加到暂存区(本地仓库)2.将暂存区的文件添加到.git仓库中3.将.git仓库中的变化…

4.msf辅助模块

目录 1 在虚拟机中设置与外部相同的网段 2 当前内网中的可用IP arp_sweep 3 搜索指定IP的TCP端口信息 portscan/tcp 4 扫描http服务的路由 http/dir_scanner 5 SSH密码爆破 ssh/ssh_login 1 在虚拟机中设置与外部相同的网段 我真实机的地址的网段是192.168.0 我虚拟…

【大模型】开源且可商用的大模型通义千问-7B(Qwen-7B)来了

【大模型】开源且可商用的大模型通义千问-7B&#xff08;Qwen-7B&#xff09;来了 新闻通义千问 - 7B 介绍评测表现快速使用环境要求安装相关的依赖库推荐安装flash-attention来提高你的运行效率以及降低显存占用使用 Transformers 运行模型使用 ModelScope 运行模型 量化长文本…

SAP标准搜索帮助(Search Help)改造之标准增强点

1. 搜索帮助加载前 包含程序&#xff1a;LWDTMO01 行&#xff1a;40 标准搜索帮助输出前的控制&#xff08;影响标准Search Help CDS View Search Help&#xff08;如果在标准Search Help搜索帮助出口函数上修改控制参数&#xff0c;则不会影响 CDS View Search Help&#xf…

【Kubernetes】Kubernetes之二进制部署

kubernetes 一、Kubernetes 的安装部署1. 常见的安装部署方式1.1 Minikube1.2 Kubeadm1.3 二进制安装部署2. K8S 部署 二进制与高可用的区别2.1 二进制部署2.2 kubeadm 部署二、Kubernetes 二进制部署过程1. 服务器相关设置以及架构2. 操作系统初始化配置3. 部署 etcd 集群4. 部…

Vue——formcreate表单设计器自定义组件实现(二)

前面我写过一个自定义电子签名的formcreate表单设计器组件&#xff0c;那时初识formcreate各种使用也颇为生疏&#xff0c;不过总算套出了一个组件不是。此次时隔半年又有机会接触formcreate&#xff0c;重新熟悉和领悟了一番各个方法和使用指南。趁热打铁将此次心得再次分享。…

python爬虫1:基础知识

python爬虫1&#xff1a;基础知识 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 目录结构 文章目录 python爬虫1&#xff1a;基础知识1. 基础认知1.1 什么是爬虫&…

【2023】XXL-Job 具体通过docker 配置安装容器,再通过springboot执行注册实现完整流程

【2023】XXL-Job 具体通过docker 配置安装容器&#xff0c;再通过springboot执行注册实现 一、概述二、安装1、拉取镜像2、创建数据库3、创建容器并运行3、查看容器和日志4、打开网页 127.0.0.1:9051/xxl-job-admin/ 三、实现注册测试1、创建一个SpringBoot项目、添加依赖。2、…

steam搬砖项目拆解,长久稳定

steam搬砖指将"CS:GO"的游戏道具从国外游戏平台搬到国内的游戏平台&#xff08;一般都是在网易BUFF&#xff09;进行贩卖&#xff0c;从而赚取道具商品差价或者汇率的差价。 首先&#xff0c;Steam是全球最大的游戏平台&#xff0c;拥有上亿的玩家&#xff0c;同时在…

ISC 2023︱诚邀您参与赛宁“安全验证评估”论坛

​​8月9日-10日&#xff0c;第十一届互联网安全大会&#xff08;简称ISC 2023&#xff09;将在北京国家会议中心举办。本次大会以“安全即服务&#xff0c;开启人工智能时代数字安全新范式”为主题&#xff0c;打造全球首场AI数字安全峰会&#xff0c;赋予安全即服务新时代内涵…