Heim >Web-Frontend >HTML-Tutorial >js+css实现模态层效果_html/css_WEB-ITnose

js+css实现模态层效果_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:55:531084Durchsuche

在做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代码。


源码下载


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn