文档章节

十二、用modal 实现浮层效果

ssshen
 ssshen
发布于 2017/08/30 14:54
字数 338
阅读 38
收藏 0

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/js/json2.js"></script>
</head>
<body>
    <div>
        <div class="mycontainer">
            <table width="100%">
                <tr>
                    <td>
                        <button id='addFEIssue' name='addFEIssue' class="btn btn-primary" data-toggle="modal" data-target="#myModal">展示浮层</button>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 模态框(Modal) -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">浮层标题</h4>
                    </div>
                    <div class="modal-body">
                        <p style="color:red" align="center" id="warnP"></p>
                        <table class="table table-striped">
                            <tr>
                                <td>
                                    <p>显示测试信息</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="closeAddFEIssue" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" id="saveandsend">
                            提交并发送邮件
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
</body>
</html>

javascript:

<script>
// 点击弹出页关闭按钮时,设置增加前端资源上线为不可用
$('#closeAddFEIssue').on('click', function(e) {
    console.log('点击关闭按钮');
});
// 弹出页关闭时,设置增加前端资源上线为不可用
$('#myModal').on('hide.bs.modal', function(e) {
    console.log('浮层要隐藏了。。。');
});

$('#saveandsend').on('click',function(e){
    console.log('点击发送按钮');
    $('#myModal').modal('hide');
});
</script>

效果如下:
输入图片说明

modal支持的事件有一下4个,可以结合这几个事件添加自己的代码,完成想要的结果
输入图片说明

参考文章:
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

© 著作权归作者所有

ssshen
粉丝 2
博文 34
码字总数 12481
作品 0
海淀
程序员
私信 提问
iView 发布 2.0 正式版,基于 Vue.js 的 UI 组件库

iView v2.0.0 发布了,iView 是一套基于 Vue.js 的 UI 组件库,主要服务于 PC 界面的中后台产品。 该版本更新如下: Nuxt.js 支持使用多语言。查看 Modal 的 width 当不大于 100 时,将以百分...

aresn
2017/07/28
5.7K
19
bootstrap模态弹出框

模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js。 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件。 样式代码: ☑ LE...

老胡不胖
2015/11/23
1K
0
js实现数据加载,页面遮罩效果

实现数就加载前显示遮罩层,数据加载完隐藏遮罩层,此功能适用于数据加载,数据导入,数据导出使用场景 对应的js文件内容: !(function() { var modules = {}; function require(id) { var ...

brave666
2016/09/30
581
0
一步一步带你封装基于react的modal组件

中秋放假,一个人有点无聊,于是写点博文暖暖心,同时祝大家中秋快乐~ 🙃 接下来将一步步带领大家实现一个基本的modal弹窗组件,封装一个简单的动画组件,其中涉及到的一些知识点也会在代码...

binnear
2018/09/23
0
0
Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条

Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条 Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- ove...

517270667
2017/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rocketmq之源码分析阶段总结(二十一)

RocketMQ是队列模型的消息中间件,具有高性能,高可靠,高实时,分布式的特点。同时支持分布式事物的两阶段提交,实现在分布式环境的事物操作。 1,nameserv是分布式的部署,并且相互之间不通...

wangshuaixin
30分钟前
2
0
小猿圈linux之在mac上安装 docker

docker极大提高了应用的运行效率,降低了云计算资源供应的成本,同时让应用的部署、测试和分发都变得前所未有的高效和轻松!docker是一个容器,不像kvm,他是真实的系统,启动时,KVM消耗的资...

小猿圈加加
36分钟前
1
0
spring aop 代理private方法 报错的问题分析

spring aop 代理private方法报空指针的问题 这两天做aop切面日志时,发现private方法报空指针。 原切入点配置如下: @Pointcut("@within(org.springframework.web.bind.annotation.RestC...

my_juke
41分钟前
2
0
c 基础教程六:c 循环结构

有的时候,我们可能需要多次执行同一块代码,c 语言提供了如下几种循环,各有特色。 while 循环 for 循环 do-while 循环 while 循环 只要给定的条件为真,C 语言中的 while 循环语句会重复执...

故城以南丶思念不安
今天
5
0
spark 常见操作

为spark DataFrom 添加一个为 空的新列,使用UDF函数 想产生一个IntegerType类型列为null的DataFrame该怎么做。 import org.apache.spark.sql.functions._import org.apache.spark.sql.type...

蜉先生
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部