bootstrap弹出模态框

（1）引入jquery, bootstrap相关的

jquery下载地址：

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弹出模态框的更多相关文章

bootstrap弹出模态框会给body加padding的解决方法
bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...
从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...
Ajax发送请求等待时弹出模态框等待提示
主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...
JavaScript：用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
bootstrap-table：操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...
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 ...
yii 页面加载完成后弹出模态框
<?php $js = <<<JS $('#page-modal').modal('show');//页面加载完显示模态框 $('.modal-dialog').css('wi ...
拥Bootstrap入怀——模态框（modal）篇
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

随机推荐

linux给当前用户添加环境变量
比如当前用户为oracel,则添加环境变量操作为: vim /home/oracel/.bashrc
Memcached 数据导出与导入
我们使用 memcached-tool 命令来导出数据: [root@localhost ~]# memcached-tool dump > /tmp/.txt Dumping memcache ...
Selenium 管理 Cookies
使用 Selenium ,还可以方便地对 Cookies 进行操作,例如获取.添加 .删除 Cookies 等 from selenium import webdriver browser = web ...
如何构建日均千万PV Web站点(二) 之~缓存为王~
随着网站业务的不断发展,用户的规模越来越大:介于中国无比蹩脚复杂的网路环境:南电信:北联通:中间竟然只用一条链路进行互联通信!有研究表明,网站访问延迟和用户流失率正相关,网站访问速度越慢,用户越容易失 ...
linux 开机自启转载
设置开机启动示例: # touch /etc/init.d/rc.local 设置为可执行: # chmod +x /etc/init.d/rc.local 用 update-rc.d 设置启动级别: ...
说说C与汇编之间的互相联系（转）
在嵌入式系统开发中,目前使用的主要编程语言是C和汇编,C++已经有相应的编译器,但是现在使用还是比较少的.在稍大规模的嵌入式软件中,例如含有OS,大部分的代码都是用C编写的,主要是因为C语言的结构比较 ...
iOS - 转场动画
苹果在 iOS7 定制了 ViewController 的切换效果一在iOS5和iOS6之前,ViewController的切换主要有4种 Push/Pop,NavigationViewCotnr ...
#define #undef
#include <stdio.h> int main( void ) { #define MAX 200 printf("MAX= %d\n",MAX); #unde ...
【大数据系列】基于MapReduce的数据处理 SequenceFile序列化文件
为键值对提供持久的数据结构 1.txt纯文本格式,若干行记录 2.SequenceFile key-value格式,若干行记录,类似于map 3.编写写入和读取的文件 package com.slp; ...
Nhibernate学习
Contains 缓存中是否存在SessionFactoryBizCom.GetInstance().GetCurrentSession().Contains(t1) Evict 临时状态(Trans ...

bootstrap弹出模态框

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

随机推荐

热门专题