Heim > Artikel > Web-Frontend > CSS遮罩层的实现_html/css_WEB-ITnose
CSS遮罩层的实现_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:021835Durchsuche
偶然发现自己原来写了一个CSS遮罩层，虽然这个东西没什么技术含量，但如果本人离开公司后又遇见此类问题，那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。
直接上代码吧。
第一步，html代码：
Java代码
上面的代码由三部分构成，popDiv表示弹出层，即单击“挂号须知”链接时弹出。
而bg表示遮罩层，即弹出层显示时将层后面的内容遮住。最后就是指显示的链接。
这三部分的CSS类如下：
Css代码
- .mydiv {
- #FCF4EA;
- border: 1px solid #D00000;
- text-align: center;
- font-size: 12px;
- z-index:99;
- left:30%;/*FF IE7*/
- top: 20%;/*FF IE7*/
- margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
- margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
- margin-top:0px;
- position:absolute;/*FF IE7*/
- }
- .note_div{
- width:700px;
- height:400px;
- overflow:scroll;
- text-align: left;
- padding:15px;
- }
- .bg {
- #ccc;
- filter:alpha(opacity=50);/*IE*/
- opacity:0.5;/*FF*/
- z-index:1;
- position:absolute;/*IE6*/
- }
有个部分很重要，那就是bg遮罩层的要覆盖全屏的问题，这个东西比较难解决，所以借助了JQuery来解决，即页面初始化时再设置bg的大小：
Js代码
- $(function(){
- $(".bg").width($(document).width());
- $('.bg').height($(document).height());
- $('.bg').css('left',0);
- $('.bg').css('top',0);
- });
有了上面的基础之后，只需要在单击链接时通过ajax回调来设置需要显示的数据及遮罩层，如下：
Js代码
- function showDiv(orgId){
- regAsyncController.getOrgNotes(orgId,function(data){
- $("#orgNote").html(data);
- $("#bg").show();
- $("#popDiv").fadeIn(1000);
- });
- }
- function closeDiv(){
- $("#popDiv").fadeOut(1000,function(){
- $("#bg").hide();
- });
- }
这个过程其实比较简单，但本人并不经常搞页面的东西，所以CSS的东西也记不住几个，只能知道点就写下来了。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：ASP如何实现注册后发送激活邮件？_html/css_WEB-ITnoseNächster Artikel：如何将旋转90度的div中的每一个字再旋转回来_html/css_WEB-ITnose