文档章节

使用jQuery仿造bootStrap模态框

issac宝华
 issac宝华
发布于 2016/03/16 20:14
字数 518
阅读 92
收藏 0

HTML:

<div class="modal-data"></div>
<div class="modal-hd">
    <div class="modal-ctt">
        <!--content-->
    </div>
</div>

<button>模态框</button>

CSS:

做遮罩层 modal-data:

.modal-data{
    background-color: #4F535F;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    display: none;
    text-align: center;
    z-index: 10;
    opacity: 0.8;
}
//fixed属性的top: 0;bottom:0;保证在遮罩层可以在垂直方向全覆盖
//并且只有使用了定位(position)属性,z-index才会有效;

.modal-hd{
    z-index: 20;position: fixed; //这里注意要用fixed,若使用absolute的话,当窗口可以滑动时,白框就会
    //下滑滚轴的时候,白框被滑到顶部,不会固定在屏幕中
    width: 100%;padding-top: 50px;display: none;
}
//还要在套一层DIV是因为要使用z-index属性,这样才不能保证白框能叠在modal-data上面而不是下面
//要使用z-index就得使用定位,但是使用了定位就居中不了,所以要套这一层DIV

.modal-ctt{
    width: 300px;height: 200px;background-color: white;margin: auto;opacity: 0;
    border-radius: 5px;
}
//这是真正的白框,一开始设置透明度为零,为了白框可以由浅到深淡入,由于白框没有用到定位,所这里也就可以
//使用剧中了

JavaSCript/jQuery

//弹入
$("button").click(function(){
    //让遮罩层先淡入
    $(".modal-data").fadeIn();
    //将隐藏的白框“显示”,此时还是透明
    $(".modal-ctt").parent().css("display","block");
    //使用setTimeout来延时是防止,白框比遮罩层先淡入
    setTimeout(function(){
        //使用攻城重要道具  animate动画方法
        //分别让margin-top和opacity在300毫秒内从0分别渐变到100px和1
        $(".modal-ctt").animate({
            marginTop:'100px',
            opacity: '1'
        },300);
    },500);
});
//弹出
//以下是上面的逆推,这里我只设置了,点击遮罩层触发淡出
$(".modal-data").click(function(){
    $(".modal-ctt").animate({
        marginTop:'0',
        opacity: '0'
    },300);
    setTimeout(function(){
        $(".modal-data").fadeOut();
        $(".modal-ctt").parent().css("display","none");
    },300);
});

//我这里是有用到jQuery的,所以要先引入jQuery文件

 

 

 

 

© 著作权归作者所有

issac宝华
粉丝 9
博文 140
码字总数 34397
作品 0
珠海
私信 提问
提供给开发者的 20 款最棒的 jQuery Bootstrap 插件

Twitter Bootstrap 是最流行的前端框架之一,作为开发者用作建立有效和有用的Web应用的手段,它可被看作是网络发展的中坚力量。它功能很丰富:使用12列响应网格,众多组件,JavaScript插件,...

oschina
2014/06/19
42.7K
41
推荐 15 个 jQuery 选择框插件

jQuery Selectbox 插件可以让你创建漂亮和吸引眼球的选择框,用于替代浏览器自带的老旧的 HTML 选择框效果。本文向你推荐 15 个 jQuery 的选择框插件,可轻松集成到你的 Web 应用中。希望你能...

oschina
2015/07/03
47.5K
13
窗口模态(model)的实现,让你点不着!

一、唠叨: 今天又重新认识了 bootstrap 这个强悍的UI,但是个人还是觉得在操作布局上面不是自己很能熟悉的。但是它的其他功能真心做的很好。值得深入学些研究的。今天我就简单来自己做一个模...

乐派电影
2014/04/15
239
0
如何获取html请求的url

各位小伙伴好,请教个问题,如下图所示,用jquery的load方法加载bootstrap的模态框,怎么获取浏览器控制台的请求地址(也就是load页面的url),而不是地址栏中的url,麻烦给小伙伴抽空看一下...

FuriousPws
2016/09/14
612
4
jquery attr prop checkbox已有checked=checked但不显示勾选问题

最近在做项目的过程中碰到了这样的一个问题:在使用bootstrap模态框的过程中,在模态框中有一个checkbox标签,一开始是为选中的,当点击触发模态框按钮,选中chcekbox时,会显示勾选,这个时...

梅气灶
2015/08/12
2.4K
1

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部