js+css实现模态层效果

在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路,希望对大家有用。先贴效果吧:

模态层效果

下面说说在写模态层的时候的思路:通过可配置的参数width,height,title以及content用来设定弹出的信息框显示的内容,并通过可配置参数container用来设定模态层显示的区域。思路很简单,主要是一些css样式和js处理,详见源码:

modal.css

html,body{
    font-size: 12px;
    font-family: "微软雅黑";
}
.modal{
    position: absolute;
    top:0px;
    left: 0px;
    border: 1px solid #000;
    background: #555;
    opacity: 0.4;
}
.infowin{
    border: 1px solid #777777;
    background: #fff;
    box-shadow: 0 0 0.75em #777777;
    -moz-box-shadow: 0 0 0.75em #777777;
    -webkit-box-shadow: 0 0 0.75em #777777;
    -o-box-shadow: 0 0 0.75em #777777;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
}
 .title{
    border-bottom: 1px solid #777777;
}
.title_content{
    padding: 5px;
    padding-left: 10px;
    font-size: 14px;
    font-family: "微软雅黑";
    font-weight: bold;
}
.close{
    background: url(close.png) no-repeat;
    width: 25px;
    height: 25px;
    float: right;
}
.close:hover{
    cursor: pointer;
}
.content{
    padding-left: 10px;
    padding-top: 10px;
}

jquery.modal.js

(function($){
    $.fn.modalInfowindow = function(options){
        var defaults = {};
        var options = $.extend(defaults, options);
        var container=$(this);
        var width=options.width, height=options.height, title=options.title, content=options.content;
        //模态层容器
        var modal=$("<div id='modal'></div>");
        modal.css("width","100%");
        modal.css("height","100%");
        //模态层
        var modal_div=$("<div class='modal'></div>");
        modal_div.css("width","100%");
        modal_div.css("height","100%");
        //信息框
        var infoWin=$("<div class='infowin'></div>");
        infoWin.css("width",width+"px");
        infoWin.css("height",height+"px");
        infoWin.css("position","absolute");
        infoWin.css("top",(container.height()-height)/2+"px");
        infoWin.css("left",(container.width()-width)/2+"px");
        //标题
        var infoWin_title=$("<div class='title'></div>");
        var infoWin_title_close=$("<div class='close'></div>")
        infoWin_title_close.on("click",function(){
            console.log("Close Modal!");
            modal.hide();
        });
        var infoWin_title_content=$("<div class='title_content'></div>")
        infoWin_title_content.append(title);
        infoWin_title.append(infoWin_title_close);
        infoWin_title.append(infoWin_title_content);
        //内容
        var infoWin_content=$("<div class='content'></div>");
        infoWin_content.append(content);
        //信息框添加标题和内容
        infoWin.append(infoWin_title);
        infoWin.append(infoWin_content);
        //模态层容器添加模态层和信息框
        modal.append(modal_div);
        modal.append(infoWin);
        //将模态层添加到容器
        container.append(modal);
    }
})(jQuery);

将之封装成一个jquery插件,提高可重用性,在页面短的调用方式如下:

<div class="container" id="container">
    <a class="button" onclick="ShowModal()">弹出窗口</a>
</div>

页面端涉及到的样式:

<style type="text/css">
        .container{
            width: 600px;
            height: 300px;
            position: relative;
            border: 1px solid #777777;
        }
        .button{
            position: absolute;
            left: 15%;
            top: 15%;
            background: #eee;
            padding: 5px 10px ;
        }
        .button:hover{
            background: #aaa;
            cursor: pointer;
        }
    </style>

调用modal插件:

 <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript" src="jquery.modal.js"></script>
    <script type="text/javascript">
        function ShowModal(){
            $('#container').modalInfowindow({
                width:300,
                height:150,
                title:"中国",
                content:"中国是中华人名共和国的简称"
            });
        }
    </script>

其中,content可为html代码。

源码下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

WPF 解决弹出模态窗口关闭后,主窗口不在最前

本文告诉大家如何解决这个问题,在 WPF 的软件,弹出一个模态窗口。使用另一个窗口在模态窗口前面。从任务栏打开模态窗口。关闭模态窗口。这时发现,主窗口会在刚才使...

55120
来自专栏IMWeb前端团队

3分钟13行代码搭建sass版移动端网格系统

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,网格系统分为container、row及column三大部分,而c...

22870
来自专栏林冠宏的技术文章

Go 实现 自动检索 API 错误码代码行 并 打印成文档,例 markDown 形式等

14630
来自专栏Python小屋

使用Python提取JPEG图像文件dpi并计算物理尺寸

感谢浙江省浦江中学方春林老师提供的问题、测试图像和第一版本的代码! 下面的代码需要安装Python图像处理库pillow,由于不同公司对JPEG压缩算法和格式的...

640100
来自专栏程序小工

PHP实现无限级分类 -- Path标识

在实际项目中经常要用到无限级分类,如多级分类、导航表等。PHP 实现无限级分类通常有两种实现方式,一种是利用path字段(pid+id)标识当前层级;另一种是利...

48620
来自专栏听雨堂

Flash背景透明的代码

      我觉得这个应该不是太难,结果DW中死活设置不成功,网上搜索到的都是一些互相抄了抄去的不知所云的东西,懒得去学习研究,还不如在自己原来做过的网站中找代...

21360
来自专栏Python小屋

使用Python写入docx文件并控制字体颜色

背景知识:docx文件的结构分为三层,1、Docment对象表示整个文档;2、Docment包含了Paragraph对象的列表,每个Paragraph对象用来表...

25440
来自专栏小鹏的专栏

刚开始玩openMP,总结一下遇到的一点小问题。

        首先,VS中设置步骤:         工程属性 —> C/C++ —> language 中的Open MP Suport中选择Yes 就OK...

23290
来自专栏专知

Python网络爬虫与信息抽取笔记06 爬虫实战2

17320
来自专栏编程坑太多

jQuery对表格的操作示例

18420

扫码关注云+社区

领取腾讯云代金券