Bootstrap插件（一）——模态框（modal.js）

最新推荐文章于 2024-05-23 21:59:51 发布

小巷下起了雨

最新推荐文章于 2024-05-23 21:59:51 发布

阅读量1.9w

点赞数 1

分类专栏： front-end(bootstrap) 文章标签： bootstrap 插件 data属性 show.bs.modal modal

本文链接：https://blog.csdn.net/qq_28057577/article/details/77887487

版权

前言：这一片文章我们将对bootstrap的modal模态框进行学习，学习他是如何绑定到一个按钮上去点击显示，学习模态框的简单数据配置，学习模态框的使用方式，事件，方法、参数等；下面是modal的内容总结。

1.模态框的大小以及动画效果禁用

2.通过button传递内容给绑定的modal

3.模态框的调用方法

4.模态框的一些配置参数以及作用

5.模态框的一些方法

6.模态框的事件监听

1.模态框的大小以及动画效果禁用

模态框的大小用modal-lg和modal-sm属性去设置，而动画的限制我们需要不使用fade类，接下来还是使用一个示例，在实践中去理解，敲一遍什么都懂了。

示例代码：

 
    
  
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>组件</title>
    <!--引入bootstrap样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--引入jq（必须在bootstrap.min.js文件之前）-->
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
    <!--引入bootstrap js-->
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="margin: 60px">
    <!--大模态框
        注意：（1）下面是通过data属性将button和modal绑定的，后面会学习js调用modal
             （2） 通过 data-target 绑定modal注意里面需要加 .号
    -->
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target=".ex-modal-lg">大模态框</button>
    <div class="modal fade ex-modal-lg" tabindex="-1" role="dialog" aria-labelledby="largerModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">larger modal header</div>
                <div class="modal-body">
                    <img src="img/img.jpg" style="padding: 5px;">
                    larger modal body</div>
                <div class="modal-footer">larger modal footer</div>
            </div>

最低0.47元/天解锁文章

小巷下起了雨

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap插件（一）——模态框（modal.js）

前言：这一片文章我们将对bootstrap的modal模态框进行学习，学习他是如何绑定到一个按钮上去点击显示，学习模态框的简单数据配置，学习模态框的使用方式，事件，方法、参数等；下面是modal的内容总结。目录： 1.模态框的大小以及动画效果禁用 2.通过button传递内容给绑定的modal 3.模态框的调
复制链接

扫一扫