弹出框css技巧

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

技术要点:

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

代码如下:

<div id="financeTip" style=""><div class="financeTipBg" style=""></div><div id="financeTipInfor" class="e-tankuang alert financeTankuang" style=" "><button type="button" class="close tanweizhiClose" data-dismiss="alert">&times;</button><div class="e-tankuang-title" id="myModalLabel">弹出框标题</div><div class="e-tankuang-content">弹出框信息</div></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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/294546.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在业务层实现校验请求参数

前言在前面的文章中&#xff0c;我们介绍了在业务层实现管道模式&#xff1a;响应缓存记录请求日志今天&#xff0c;我们同样使用IPipelineBehavior&#xff0c;介绍如何在业务层实现校验请求参数&#xff0c;用于检查输入是否满足业务要求。Demo首先&#xff0c;创建ASP.NET C…

静电可以有多好玩?

1 静电可以有多好玩&#xff1f;孩子&#xff1a;知道我怎么秃的了吧2 这就是爱情啊3 今年最佳cos4 别人家的狗能当桌子▼你家的狗……&#xff08;主银&#xff0c;我就这样静静的看着你&#xff09;▼5 含羞草6 可以让我骑一下你吗7 总之&#xff0c;离我远点你点的每个赞&am…

+操作符重载(2)

2019独角兽企业重金招聘Python工程师标准>>> #include <iostream> class C_A { public: int Cn; }; struct S_A { public: int Sn; }; enum E_A { En 12 }; C_A operator(int n,C_A cVar) { cVar.Cn n; return cVar; …

WPF 四种不同效果呼吸灯

WPF开发者QQ群&#xff1a; 340500857 | 微信群 -> 进入公众号主页 加入组织由于微信群人数太多入群请添加小编微信号&#xff08;yanjinhuawechat&#xff09;或&#xff08;W_Feng_aiQ&#xff09;邀请入群&#xff08;需备注WPF开发者&#xff09;PS&#xff1a;有更好的…

用GCD线程组与GCD信号量将异步线程转换为同步线程

用GCD线程组与GCD信号量将异步线程转换为同步线程 有时候我们会碰到这样子的一种情形: 同时获取两个网络请求的数据,但是网络请求是异步的,我们需要获取到两个网络请求的数据之后才能够进行下一步的操作,这个时候,就是线程组与信号量的用武之地了. 线程组用以监听线程的执行情况…

基于visual Studio2013解决C语言竞赛题之0710排序函数

&#xfeff;&#xfeff;题目解决代码及点评/* 10、用指向指针的指针的方法对N个整数排序并输出。 要求排序单独写成一个函数。N个整数和N在主程序中输入&#xff0c;最后在主函数中输出。 */ #include <stdio.h> #include <stdlib.h> #define N 10 void main() {…

清华本科生0人去阿里,交叉信息院硕士没人再深造 | 清华大学2020年毕业生就业质量报告...

全世界只有3.14 % 的人关注了爆炸吧知识转自&#xff1a;量子位作者&#xff1a;金磊 杨净这几天&#xff0c;《清华大学2020年毕业生就业质量报告》火了。于是&#xff0c;我们也下载下来“拜读”了一下。就业率、毕业去向、就业地域等等信息看下来&#xff0c;也还算是情理之…

Android之TypedArray 为什么需要调用recycle()

转自&#xff1a;http://blog.csdn.net/Monicabg/article/details/45014327 在 Android 自定义 View 的时候&#xff0c;需要使用 TypedArray 来获取 XML layout 中的属性值&#xff0c;使用完之后&#xff0c;需要调用 recyle() 方法将 TypedArray 回收。 那么问题来了&#x…

什么就像谈恋爱一样?

1 向这只猫学习&#xff01;我的妈耶&#xff0c;这撩人的眼神&#xff0c;这小手&#xff0c;以后这大兄die的女朋友还要跟一只猫吃醋&#xff0c;默默先心疼一下2 善良的人最可爱了&#xff01;3 妈妈救我&#xff0c;马路牙子不让我去找你4 这是童年的回忆呀5 一位网友收到老…

.NET Regular Expressions

HTML去空白回车换行 private static readonly Regex REGEX_LINE_BREAKS new Regex("\n\s*", RegexOptions.Compiled); private static readonly Regex REGEX_LINE_SPACE new Regex("\n\s*\r", RegexOptions.Compiled); private static readonly Regex R…

他拥有当今世界最高智商,从出生就一路开挂,然而,获得数学最高奖的他却说自己只是个热爱数学的普通人...

全世界只有3.14 % 的人关注了爆炸吧知识今天就讲讲这位平易近人的顶级天才吧。1975年&#xff0c;陶哲轩出生在澳大利亚&#xff0c;父母均毕业于香港大学&#xff0c;父亲陶象国是一名儿科医生&#xff0c;母亲梁蕙兰是物理和数学专业的高材生&#xff0c;曾当过中学数学教师。…

Win11用户增长迅速!你升了吗?

近日&#xff0c;AdDuplex 发布了 2021 年 11 月微软现代 Windows 操作系统的市场报告。现代 Windows 操作系统的统计只包括 Windows 11 和 Windows 10。Windows 11在 11 月&#xff0c;Windows 11 操作系统的市场份额达到 8.9%&#xff0c;其中包括 8.6% 运行 Windows 11 正式…

豆瓣9分,颠覆世界观的好书,每读一章就感叹一次:原来如此!(免费领)

全世界只有3.14 % 的人关注了爆炸吧知识聪明人的投资直击本质股神巴菲特曾在2019股东大会上&#xff0c;遇到了一位来自美国旧金山的年轻人提问&#xff1a;“要想成为一个好的投资者&#xff0c;最好的方法是什么&#xff1f;”巴菲特毫不犹豫回答道&#xff1a;“阅读”。5岁…

C# WPF MVVM开发框架Caliburn.Micro Screens, Conductors 和 Composition⑦

01—Screens, Conductors and CompositionActions, Coroutines and Conventions往往最能吸引Caliburn.Micro的注意力&#xff0c;但如果你想让你的UI设计得更好&#xff0c;那么了解屏幕和导体可能是最重要的。如果您想利用合成&#xff0c;这一点尤其重要。杰里米米勒最近在为…

如此生猛的纪录片,背后是难以置信的故事!

全世界只有3.14 % 的人关注了爆炸吧知识美国纪录片大师阿尔伯特梅索斯所言&#xff1a;“制作一部电影不是为一个问题寻求答案&#xff0c;而是尝试去捕捉生活本身。”从赵忠祥那句大名鼎鼎的“春天到了&#xff0c;又到了动物交配的季节”开始&#xff0c;纪录片看似没有像影视…

官宣!.NET官网发布中⽂版

#官宣.NET简体中文版.NET的官网终于正式发布简体中⽂版本了&#xff0c;⽽且是作为官方支持的第一梯队&#xff01;这是一个影响未来中国.NET技术生态的大事。我承认好的英文是从事IT技术的重要基础&#xff0c;但本地化语言能帮助更多人了解、学习、应用该技术。.NET官网中文版…

爱因斯坦为什么不是普通人?看他怎么喝茶就明白了,差距太明显了!没法比.......

全世界只有3.14 % 的人关注了爆炸吧知识来源&#xff1a;Закройте, дует看到上面这个动图&#xff0c;猜到这篇文章要讲什么了吗&#xff1f;讲泡茶&#xff0c;啊呸&#xff01;讲“茶叶悖论”&#xff0c;一个爱因斯坦喝茶时不经意间看到的物理现象&#xff0c;然…

在应用程序中实现对NandFlash的操作

以TC58NVG2S3ETA00 为例&#xff1a; 下面是它的一些物理参数&#xff1a; 图一 图二 图三 图四 图五 图6-0 图6-1 说明一下&#xff0c;在图6-1中中间的那个布局表可以看做是实际的NandFlash一页数据的布局&#xff0c;其中Data区域用于存放有效的数据&#xff0c;也就是我们可…

1 盒用 1 年,这个防雾黑科技,让你的眼镜再也不起雾!

▲ 点击查看本来被疫情这么一闹&#xff0c;口罩就已经成了我们离不开的刚需品。现在天气大幅度降温&#xff0c;口罩更不能摘了&#xff0c;必须得御寒防疫两手抓&#xff01;虽然口罩的优点有目共睹&#xff0c;但它最大的 Bug 也够大伙儿吐槽一顿了——口罩眼镜一秒起雾&…

福利好礼现金大奖等你来→首届 .NET Conf China Hackathon 火热报名中!

.NET 开源以来越来越多的开发者和企业开始加入到 .NET 的生态。.NET 6 是 .NET Framework, .NET Core 和 Mono 三个平台完成融合的第一个长期支持版本&#xff0c;无论你是开发云原生应用&#xff0c;还是 IOT 应用&#xff0c;移动端&#xff0c;桌面应用&#xff0c;.NET 6 …