js+css实现模态层效果_html/css_WEB-ITnose
程序员文章站
2022-05-26 17:50:15
...
在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路,希望对大家有用。先贴效果吧:
jquery.modal.js
页面端涉及到的样式:
调用modal插件:
其中,content可为html代码。
模态层效果
下面说说在写模态层的时候的思路:通过可配置的参数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=$(""); modal.css("width","100%"); modal.css("height","100%"); //模态层 var modal_div=$(""); modal_div.css("width","100%"); modal_div.css("height","100%"); //信息框 var infoWin=$(""); 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=$(""); var infoWin_title_close=$("") infoWin_title_close.on("click",function(){ console.log("Close Modal!"); modal.hide(); }); var infoWin_title_content=$("") infoWin_title_content.append(title); infoWin_title.append(infoWin_title_close); infoWin_title.append(infoWin_title_content); //内容 var infoWin_content=$(""); infoWin_content.append(content); //信息框添加标题和内容 infoWin.append(infoWin_title); infoWin.append(infoWin_content); //模态层容器添加模态层和信息框 modal.append(modal_div); modal.append(infoWin); //将模态层添加到容器 container.append(modal); }})(jQuery);将之封装成一个jquery插件,提高可重用性,在页面短的调用方式如下:
页面端涉及到的样式:
调用modal插件:
其中,content可为html代码。
源码下载
推荐阅读
-
js+html5实现半透明遮罩层弹框效果
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
js实现图片切换效果_html/css_WEB-ITnose
-
js实现图片切换效果_html/css_WEB-ITnose
-
jquery+div如何实现frameset效果?_html/css_WEB-ITnose
-
怎么实现鼠标移动到导航栏文章变化效果_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
用html5实现涂擦效果?_html/css_WEB-ITnose
-
CSS如何实现段落首字符缩进两个字符效果_html/css_WEB-ITnose