js css to achieve modal layer effect_html/css_WEB-ITnose

When doing web front-end, sometimes the modal layer will be involved. Here is an implementation idea, I hope it will be useful to everyone. Let’s post the effect first:

Modal layer effect

Let’s talk about the idea when writing the modal layer: through the configurable parameter width, Height, title and content are used to set the content displayed in the pop-up information box, and are used to set the area displayed by the modal layer through the configurable parameter container. The idea is very simple, mainly some css styles and js processing, see the source code for details:

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);

Encapsulate it into a jquery plug-in to improve reusability. The short calling method on the page is as follows:

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

Styles involved on the page:

<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>

Call modal plug-in:

 <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>

Among them, content can be html code.

Source code download