（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. 【代码审计】iZhanCMS_v2.1 后台任意文件删除漏洞分析

      0x00 环境准备 iZhanCMS官网:http://www.izhancms.com 网站源码版本:爱站CMS(zend6.0) V2.1 程序源码下载:http://www.izhancms ...

  2. Android开发--ZZ:Android APK反编译详解（附图）

    最近看了很多app的界面和交互非常棒,想学习下他们的源码,简单加压apk文件得到的资源文件和源码都不可读 它们都是编译后的文件,在网上搜索了下,发现这篇blog提到的工具都非常好用~ 文章原地址:ht ...

  3. HTML 引用

    关于 HTML 引用: (1) <q> 和 <blockquote> 用于实现长短不一的引用语(2) <q> 用于短的引用,<blockquote> 用 ...

  4. Unity Animation需要Inspector右键打开Debug模式，然后勾选Legacy，最后再Inspector右键打开Normal

  5. Python查找文件

    1. 利用字符串的前缀和后缀匹配查找文件 str.startswith() star.endswith() 2.使用fnmatch fnmatch              判断文件名是否符合特定模式 ...

  6. Linux IPC BSD socket编程基础

    头文件 #include<unistd.h> #include <sys/types.h> #include <sys/socket.h> #include< ...

  7. 【JSON.NET】json序列化小驼峰格式（属性名首字母小写）

    废话少说,先上代码 var setting = new JsonSerializerSettings { ContractResolver = new Newtonsoft.Json.Serializ ...

  8. m个苹果放入n个篮子

    题目 :X个相同的苹果放入Y个篮子,(1)篮子可以为空 ,篮子不同. 放法有C(X+Y-1,Y-1 );// (2)篮子不可以为空,篮子不同.放法有C(X-1,Y-1) //插挡板法 分析有了这个组合 ...

  9. u-boot.lds文件简介

    可执行文件由许多链接在一起的对象文件组成.对象文件有许多节,如文本.数据.init 数据.bss等.这些对象文件都是由一个称为 链接器脚本(*lds)的文件链接并装入的.这个链接器脚本的功能是将输入对 ...

  10. webstorm启动报错

    环境: 在重装完系统的电脑上第一次安装webstorm, 问题: 解决”failed to load jvm dll“的报错问题: 解决方案: 安装Microsoft Visual C++ 2010 ...