首页 > 其他分享 >bootstrap--模态框

bootstrap--模态框

时间:2024-04-24 16:11:39浏览次数:18  
标签:模态 jquery 依赖 -- bootstrap bootstrap4

bootstrap4虽然完全不依赖jquery,但是,模态框的弹出动作还是依赖jquery的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的模态框</title>
        <link rel="stylesheet" href="plugins/bootstrap-4.3.1/bootstrap.min.css">

    </head>
    <body>
        <!-- 关键部分1: 模态框触发按钮 -->
        <button type="button" class="btn btn-primary" data-toggle="modal"
            data-target="#ModalId">
            点击弹出模态框
        </button>

        <!-- 模态框 -->
            <!-- 最外层的三个标签基本不需要改,唯独第1层标签中的id要改,要和自己button的data-target属性相对应 -->
        <div class="modal fade" id="ModalId" tabindex="-1"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                <!-- 关键部分2, 模态框的三部分:头部,主体,底部 -->
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <!-- 模态框标题 -->
                        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
                        <!-- 关闭(左上角的小x) -->
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        模态框内容
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <!-- 关闭按钮 -->
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <!-- 保存按钮 -->
                        <button type="button" class="btn btn-primary">保存</button>
                    </div>
                    

                </div>
            </div>
        </div>
    </body>
    <!-- 引入依赖的js 文件, 注意先后顺序 -->
    <script src="plugins/jquery-3.7.1.min.js"></script>  
    <script src="plugins/bootstrap-4.3.1/bootstrap.min.js"></script>

</html>

 

标签:模态,jquery,依赖,--,bootstrap,bootstrap4
From: https://www.cnblogs.com/tytbook/p/18155690

相关文章

  • 点击事件报错: Cannot set properties of null (setting 'onclick')
    1、正常书写代码如下:通过外部引用JS文件实现想要的效果时报错,以下是代码的展示。在头部引入js文件<scripttype="text/javascript"src="./win.js"></script>HTML代码文件如下:<divclass="cl"><divid="mask">“冲出迷雾走向光明,最强大的力量是同......
  • 4.prometheus监控--监控linux服务器
    一、监控linux服务器1.1二进制安装#客户端操作wgethttps://github.com/prometheus/node_exporter/releases/download/v1.7.0/node_exporter-1.7.0.linux-amd64.tar.gztarxvfnode_exporter-1.7.0.linux-amd64.tar.gzls-lmvnode_exporter-1.7.0.linux-amd64/*/opt/......
  • 获取被注解的类和被注解的方法
    AopUtils.getTargetClass(bean).getMethods()这段代码用于获取一个对象(bean)的所有公共方法(publicmethods)。让我来解释一下这段代码:AopUtils.getTargetClass(bean):这个方法用于获取指定对象的目标类,即被代理的原始类。在SpringAOP中,当一个类被AOP代理后,可能会丢失原始类的一......
  • remmina 通过SOCKS5 访问远程桌面
            出于信息安全的考虑,很多时候服务器会限定IP访问,尤其是SSH或者RDP(远程桌面)。而疫情反复的当下,远程办公又是无法避免的情况,为每位居家办公人士安装固定IP宽带显然会使成本陡。如果采取传统V*N的方式,则会大大加重公司带宽的负担。通过SOCKS5的方式,使远程桌面......
  • 【Redis】Redis的操作命令(二)——Redis 哈希(HASH)
    Redishash是一个string类型的field(字段)和value(值)的映射表,hash特别适合用于存储对象。当设置一个名为demo的哈希对象时:HSETdemoname"redistutorial"description"redisbasiccommandsforcaching"likes20visitors23000 获取哈希对象语句,如下:HGETALLde......
  • Redirect is not allowed for a preflight request 跨域问题的一个解决思路
    一、前置知识首先,我们应当明确一下这个报错究竟是什么问题当我们需要跨域(当两个页面的协议,主机和端口号有任意一个不相同时)请求资源,且为非简单方法(比如方法为HEAD、GET、POST之外)时,会向服务器发送预检请求。预检请求方法为OPTIONS,用来检测服务器所支持的请求方法。在预检......
  • IDA技巧——结构体
    参考 https://bbs.kanxue.com/thread-266419.htm本文适用于初次使用IDA的小白(我本身也是小白),大佬请略过。IDB快照在我们开始修改结构体之前,首先为最初的IDB做一个快照是良好的习惯,这样可以帮助我们迅速还原某个时间点的IDB状态。比如我们改错了某个数据却没办法撤销IDB所作的......
  • 关于使用UE5打包Android的测试
    UE5打包Android,不同于UE4,在官方文档中需要Androidstudio4.0或者3.5,还有AndroidSDK,NDK等设置SetupAndroid, 在UE5Editor配置如下:  其中 gamedatainside.apk需要打钩,否则会出现报错:TherewasanerrorinstallingthegameortheobbfileProjectSDKOverri......
  • npm 常用命令
    关闭httsnpmsetstrict-sslfalse安装时候设置缓存目录(缓解你容量每天减小的c盘压力)npmconfigsetcache"路径"npmconfigsetprefix"路径"npmgetcache验证结果npmgetprefix 验证结果nvm安装遇到的问题环境变量  用户变量NODE_PATH=D:\ProgramFiles\n......
  • 第八周-结对编程
    作业题目程序源代码点击查看代码importrandomimporttimeimportosimportjsondefquestion():a=random.randint(0,100)b=random.choice(["+","-","*","/"])c=random.randint(0,100)d=random.choice(["......