（1）引入jquery, bootstrap相关的

jquery下载地址：

https://jquery.com/download/

bootstrap下载地址：

https://v3.bootcss.com/getting-started/#download

然后在head中引入：

<link rel="stylesheet" href="./lib/bootstrap-4.0.0/dist/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./lib/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>

（2）写一个案例：

<!-- Modal -->

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body">

                    add body content here

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                </div>

            </div>

        </div>

    </div>

在modal-dialog 后面添加样式：class="modal-dialog modal-lg"可以调整

（3）整合后：

<html>

<head>

    <link rel="stylesheet" href="./lib/bootstrap-4.0.0/dist/css/bootstrap.min.css" type="text/css" />

    <script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="./lib/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>

</head>

<body>

<div id="test">

    <button id="button" class="btn btn-default" style="margin-left: 100px; margin-top: 100px;">click me to show</button>

    <!-- Modal -->

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body">

                    add body content here

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    $(function () {

       $("#button").click(function () {

            $('#exampleModal').modal('show');

       });

    });

</script>

</body>

</html>

bootstrap弹出模态框的更多相关文章

  1. bootstrap弹出模态框会给body加padding的解决方法

    bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...

  2. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

  3. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...

  4. JavaScript：用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  5. bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）

    /查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...

  6. bootstrap-table：操作栏点击编辑按钮弹出模态框修改数据

    核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...

  7. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  8. yii 页面加载完成后弹出模态框

    <?php $js = <<<JS $('#page-modal').modal('show');//页面加载完显示模态框 $('.modal-dialog').css('wi ...

  9. 拥Bootstrap入怀——模态框（modal）篇

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

随机推荐

  1. Ldap 漏洞

    0x00 Ldap安装 官网地址:https://www.userbooster.de/en/download/openldap-for-windows.aspx 在win2008上安装,一路Next ...

  2. iOS开发-为UITableViewCell添加横线

    在开发过程中经常会遇到设计稿中Cell分割线样式和系统自带的样式差别很大,如何实现这里做下总结,主要包括如下两步: 1. 取消TableView默认的分割线样式 _tableView.separato ...

  3. Mac 下如何下载、启动和关闭Tomcat 和管理Mac自带的Apache

     Mac 下载.启动和关闭Tomcat 1. 下载Tomcat(地址:tomcat.apache.org),选择适合的版本(这里选择6.0.48),点击“Download”,之后在新页面点击“Core ...

  4. composer安装指定版本的laravel

    composer create-project laravel/laravel blog 4.2.*

  5. Matlab——filter函数用法

    filter:滤波函数,可用来解差分方程. y = filter(b,a,X) [y,zf] = filter(b,a,X) [y,zf] = filter(b,a,X,zi) y = filter( ...

  6. python之SQLAlchemy ORM

    前言: 这篇博客主要介绍下SQLAlchemy及基本操作,写完后有空做个堡垒机小项目.有兴趣可看下python之数据库(mysql)操作.下篇博客整理写篇关于Web框架和django基础~~ 一.OR ...

  7. SQL数据库对象名无效的解决方法

    对象名 'dbo.xxxx' 无效. 最后找到如下方法解决:原因是必须把所有以前的所有者改为DBO就不会出问题了. 执行下面语句,更改所有表的所有者为DBO exec sp_msforeachtabl ...

  8. CSS3 渐变效果

    CSS3 渐变效果 background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */ background-im ...

  9. 字符乱码 导致 ORA-12899: value too large

    问题场景: 1.创建测试表 create table t01(name varchar2(30)) 2.插入数据 SQL> insert into t01 (name) values('所有分销 ...

  10. 使用jetty的continuations实现"服务器推"

    在实际的开发中,我们可能会有这样的场景:许多客户端都连接到服务器端,当有某个客户端的消息的时候,服务器端会主动"推"消息给客户端,手机app的推送是一个典型的场景(IOS的推送都是 ...