js+css でモーダルレイヤー効果を実現_html/css_WEB-ITnose

Web フロントエンドを行う場合、モーダル層が関係することがあります。これは実装のアイデアです。皆さんのお役に立てれば幸いです。まずエフェクトを投稿しましょう:

モーダルレイヤーエフェクト

モーダルレイヤーを記述するときのアイデアについて話しましょう: 構成可能なパラメーターの幅、高さ、タイトル、コンテンツは、ポップアップ情報ボックスの表示を設定するために使用されます。は、設定可能なパラメーター コンテナーを通じてモーダル レイヤーによって表示される領域を設定するために使用されます。アイデアは非常にシンプルで、主にいくつかの 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>

モーダルプラグインの呼び出し:

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

その中で、コンテンツはHTMLコードにすることができます。

ソースコードのダウンロード