博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
弹出框css技巧
阅读量:5952 次
发布时间:2019-06-19

本文共 1238 字,大约阅读时间需要 4 分钟。

hot3.png

技术要点:

一个覆盖整个屏幕的浅灰色背景的div,一个包含内容的的div,

代码如下:

    
    
       
           ×              
弹出框标题    
弹出框信息        
$(document).ready(function(){    var m1_top = ( $(window).height() - $("#financeTipInfor").height() )/2; var m1_left = ( $(window).width() - $("#financeTipInfor").width() )/2;    $("#financeTipInfor").css({"margin": m1_top + "px" +" "+ m1_left + "px"}); window.onresize=function(){  var m1_top = ( $(window).height() - $("#financeTipInfor").height() )/2; var m1_left = ( $(window).width() - $("#financeTipInfor").width() )/2;    // $("#financeTipInfor").css({"margin": m1_top + "px auto","left": m1_left + "px"}); $("#financeTipInfor").css({"margin": m1_top + "px" +" "+ m1_left + "px"}); }  $(".close").click(function () {      $("#financeTip").css({"display": "none"});      });});
#financeTip{width:100%;overflow:hidden;}.financeTankuang{width:90%;}@media (min-width: 768px){.financeTankuang{width:600px;}}.financeTipBg{position:absolute;width:100%;height:100%;background:#000;z-index:8001;left:0;top:0;opacity:0.2}#financeTipInfor{position:absolute;left:0;top:0;z-index:8011;}

转载于:https://my.oschina.net/u/2612473/blog/660271

你可能感兴趣的文章
lombok
查看>>
Dev-FAT-UAT-PRO
查看>>
Maven, IntellJ Idea 配置注意点
查看>>
Android开发学习总结(五)——Android应用目录结构分析(转)
查看>>
观察者模式
查看>>
python操作excel (openpyxl)
查看>>
[PHP]PHP rpc框架hprose测试
查看>>
Atom 编辑器系列视频课程
查看>>
C#三种定时器
查看>>
范数 L1 L2
查看>>
协同过滤及大数据处理
查看>>
Java8 本地DateTime API
查看>>
jQuery 增加 删除 修改select option
查看>>
[原][osgearth]osgearthviewer读取earth文件,代码解析(earth文件读取的一帧)
查看>>
springboot 常用插件
查看>>
一个基于特征向量的近似网页去重算法——term用SVM人工提取训练,基于term的特征向量,倒排索引查询相似文档,同时利用cos计算相似度...
查看>>
[转]Newtonsoft.Json高级用法
查看>>
35个Java代码性能优化总结
查看>>
Spring+SpringMVC+MyBatis+easyUI整合基础篇(一)项目简述及技术选型介绍
查看>>
第一百五十一节,封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全...
查看>>