让每一名学员高薪就业
返回列表 发新帖

JS弹出模态框的方案

[复制链接]

4

主题

8

帖子

172

积分

版主

Rank: 7Rank: 7Rank: 7

积分
172

源码时代教师版主

发表于 2017-11-26 11:08:50  | 显示全部楼层 | 阅读模式
JS弹出模态框
咱们在平时的开发过程中,经常会做一些js的窗口弹出(模态框)。平时,咱们都是直接使用一些框架来完成,那当然也是比较简单。不过,我们今天来思考一下,如果是由咱们自己人来完成这个功能,到底应该怎么来做呢?
当然,这还要求咱们要有一定的js,jQuery以及相应的CSS的功底。


第一步:需要用到的CSS样式

1. 基本样式
  1. <font size="2" face="宋体">body{
  2.         background: url(../img/bg.jpg);
  3. }
  4. *{
  5.         padding:0;
  6.         margin:0;
  7.         box-sizing:border-box;
  8. }
  9. html,body{
  10.     height:100%;
  11. }</font>
复制代码

2.完成透明效果的css样式
  1. <font size="2" face="宋体">/**
  2. * 模态框样式
  3. */
  4. .modal{  
  5.         position: absolute;  /*绝对定位*/
  6.         top:0px;  
  7.     left: 0px;  
  8.     /*background: #555;  背景颜色,选浅一点的灰色即可*/
  9.     background:rgba(39,60,125,0.5); /*使用rgba完成透明,不支持IE8以下的版本 */
  10.     /*opacity: 0.4;   透明度 这里注意,浏览器的支持不是很好*/
  11.     /* filter:alpha(opacity=40); 针对 IE8 以及更早的版本 */
  12.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F273c7d,endColorstr=#7F273c7d);
  13.     width:100%;
  14.     height: 100%;
  15. }</font>
复制代码


3.弹出框架样式
  1. <font size="2" face="宋体">.modalWin{  
  2.     border: 1px solid gainsboro;  /*边框设置*/
  3.     background: #fff;  /*设计背景色*/
  4.     border-radius: 5px;  /*边框加圆角度(注:不支持IE低版本)*/
  5.     -moz-border-radius: 5px;  /*火狐边框加圆角度*/
  6.     -webkit-border-radius: 5px;    /*谷歌边框加圆角度*/
  7.     -o-border-radius: 5px;   /*欧朋边框加圆角度*/
  8.     box-shadow: 0 0 0.75em gainsboro;   /*加上相应的阴影 (注:不支持IE低版本)*/
  9.     -moz-box-shadow: 0 0 0.75em gainsboro;  
  10.     -webkit-box-shadow: 0 0 0.75em gainsboro;  
  11.     -o-box-shadow: 0 0 0.75em gainsboro;  
  12.     position: absolute;  /*绝对定位 需要js中的框小大确定位置*/
  13. }</font>
复制代码


4.头部样式
  1. <font size="2" face="宋体">.modalTitle{
  2.         height: 40px;
  3.         border-bottom: 1px solid black;
  4.         padding: 5px 0px 2px 3px; /*内边距可以自己调整一下*/
  5.         font-size: 14px;
  6.     font-weight: bold;  
  7. }</font>
复制代码


5.关闭按钮样式
  1. <font size="2" face="宋体">.close{  
  2.     width: 25px;  
  3.     height: 25px;  
  4.     background: url(../img/close.png); /*自己准备一个背景图片 */
  5.     background-size:25px 25px; /* 设置背景图片 大小,IE9以下浏览器不支持 图片如果是直接是25*25,这个不需要设置*/
  6.            /*设置好相应的位置 我这里是直接设置在右上角*/
  7.     position: absolute;
  8.     right: -10px;
  9.     top: -10px;
  10.     cursor: pointer;/*手势效果*/
  11. }  </font>
复制代码



第二步:咱们使用一个jQuery插件来完成功能
  1. <font size="2" face="宋体">//创建一个jQuery插件完成模态框
  2. $.fn.zymodal = function(options){
  3.         //拿到一些最基本的数据重视(宽度,高度,标题,内容)
  4.         var width = options.width;
  5.         var height = options.height;
  6.         var title = options.title;
  7.         var content = options.content;
  8.       
  9.         //创建一个div控件(后层的透明效果)
  10.         var modalDiv = $("<div>");
  11.         //加上相应的模态样式(后台)
  12.         modalDiv.addClass("modal");
  13.         //把样式追加到页面中
  14.         $("body").append(modalDiv);
  15.       
  16.         //设置弹出框的样式(前层显示的效果)
  17.         var modalWin=$("<div>");  
  18.         modalWin.addClass("modalWin");
  19.     modalWin.css("width",width+"px");  
  20.     modalWin.css("height",height+"px");  
  21.     //进行计算后保证咱们的框架可以居中
  22.     modalWin.css("top",($("body").height()-height)/2+"px");  
  23.     modalWin.css("left",($("body").width()-width)/2+"px");  
  24.     //添加内容
  25.     modalWin.html(content);
  26.     //把样式追加到页面中
  27.         $(modalDiv).append(modalWin);
  28.       
  29.         //设置弹出框的头部
  30.         var modalTitle = $("<div>");
  31.         modalTitle.addClass("modalTitle");
  32.         modalTitle.html(title);
  33.         //这里注意,头部要追回到弹出框的最前面
  34.         $(modalWin).prepend(modalTitle);
  35.       
  36.         //添加关闭按钮
  37.         var modalClose = $("<div>");
  38.         modalClose.addClass("close");
  39.         $(modalTitle).append(modalClose);
  40.       
  41.         //点击关闭按钮后,把整个div删除
  42.         // 也可以设置为隐藏,而下次点击就为显示(性能好一些)
  43.         modalClose.click(function(){
  44.                 $(modalDiv).remove();
  45.         })
  46. }</font>
复制代码


第三步:在页面上准备一个按钮,完成功能测试
1.页面准备
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title></title>
  6.                 <!-- 引入对应的css -->
  7.                 <link rel="stylesheet" href="css/index.css" />
  8.                 <!-- 引入jQuery -->
  9.                 <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
  10.                 <!-- 引入自己的js代码 -->
  11.                 <script type="text/javascript" src="js/index.js" ></script>
  12.         </head>
  13.         <body>
  14.                 <!-- 准备一个按钮,完成测试  -->
  15.                 <button id="modelBtn">点击我就出现模态框</button>
  16.         </body>
  17. </html>
复制代码


2. 调用模态功能
  1. $(function(){
  2.         $("#modelBtn").click(function(){
  3.                 $(this).zymodal({
  4.                         width:400,
  5.                         height:300,
  6.                         title:"今天天气真好",
  7.                         content:"里面的内容"
  8.                 });
  9.         })
  10. })
复制代码


3. 效果显示
图片1.png





回复

使用道具 举报

0

主题

2

帖子

64

积分

民工

Rank: 2

积分
64
发表于 2017-11-27 09:53:53  | 显示全部楼层
老赵,样式整巴适点撒
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表