对于前端开发者来说，js是不可缺少的语言。现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家，希望能够帮助大家一起进步，也希望大家能够多多支持！

1、今天我先分享一个遮罩层弹框效果：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>弹出提示</title>

<style>

*{margin:0;padding:0;font-size:12px;}

html,body {height:100%;width:100%;}

#content {background:#FFFFFF;padding:30px;height:100%;}

#content a {font-size:30px;color:#369;font-weight:700;}

#alert {border:1px solid#369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}

#alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 05px;}

#alert h4 span {float:left;}

#alert h4 span#close{margin-left:210px;font-weight:500;cursor:pointer;}

#alert p {padding:12px 0 0 30px;}

#alert p input {width:120px;margin-left:20px;}

#alert p input.myinp {border:1px solid #ccc;height:16px;}

#alert p input.sub {width:60px;margin-left:30px;}

</style>

</head>

<body>

<div id="content">

<a href="#">注册</a>

</div>

<div id="alert">

<h4><span>现在注册</span><span id="close">关闭</span></h4>

<p><label> 用户名</label><input type="text"class="myinp" onmouseover="this.style.border='1px solid#f60'" onfoucs="this.style.border='1px solid #f60'"onblur="this.style.border='1px solid #ccc'" /></p>

<p><label> 密　码</label><input type="password"class="myinp" onmouseover="this.style.border='1px solid#f60'" onfoucs="this.style.border='1px solid #f60'"onblur="this.style.border='1px solid #ccc'" /></p>

<p><input type="submit" value="注册"class="sub" /><input type="reset" value="重置"class="sub" /></p>

</div>

<script type="text/javascript">

var myAlert = document.getElementById("alert");

var reg = document.getElementById("content").getElementsByTagName("a")[0];

var mClose = document.getElementById("close");

reg.onclick = function()

{

myAlert.style.display = "block";

myAlert.style.position = "absolute";

myAlert.style.top = "50%";

myAlert.style.left = "50%";

myAlert.style.marginTop = "-75px";

myAlert.style.marginLeft = "-150px";

mybg = document.createElement("div");

mybg.setAttribute("id","mybg");

mybg.style.background = "#000";

mybg.style.width = "100%";

mybg.style.height = "100%";

mybg.style.position = "absolute";

mybg.style.top = "0";

mybg.style.left = "0";

mybg.style.zIndex = "500";

mybg.style.opacity = "0.3";

mybg.style.filter = "Alpha(opacity=30)";

document.body.appendChild(mybg);

document.body.style.overflow = "hidden";

}

mClose.onclick = function()

{

myAlert.style.display = "none";

mybg.style.display = "none";

}

</script>

</body>

</html>

JS遮罩层弹框效果的更多相关文章

  1. js遮罩层弹出显示效果组件化

    1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; ...

  2. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  3. iview框架 两侧弹框 出现第二层弹框 一闪而过的问题

    分析原因:寡人怀疑可能是,两层弹出框 采用的是一个开关值,发生了覆盖 解决方式 是在第二层弹框外套层计时器 源代码如下: 修改后为:

  4. js 遮罩层 loading 效果

    //调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerSho ...

  5. html js 遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS 信息提示弹框封装

    // 功能提示弹框 function tipsBox ( option ) { var html = ''; if ( option.type == 'success' ) { html += '&l ...

  7. onload + setTimeout 用法，制作广告弹框效果

    一般来说,只有 <body>,<img>, <link>, <script>,<frame>, <frameset>, < ...

  8. android dialog 模拟新浪、腾讯title弹框效果

    http://blog.csdn.net/jj120522/article/details/7764183 首先我们看一下新浪微博的效果(其它就是一个dialog):                点 ...

  9. 仿糯米弹框效果demo

    代码例如以下: <!doctype html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. 各种数据库分页语句整理以及Oracle数据库中的ROWNUM和ORDER BY的区别

    .oracle数据库分页 select * from (select a.*,rownum rc from 表名 where rownum<=endrow) a where a.rc>=s ...

  2. c#获取当前运行程序所在的目录

    C#获取项目程序及运行路径的方 1.asp.net webform用“Request.PhysicalApplicationPath获取站点所在虚拟目录的物理路径,最后包含“\”:   2.c# wi ...

  3. OpenCV代码提取：flip函数的实现

    OpenCV中实现图像翻转的函数flip,公式为: 目前fbc_cv库中也实现了flip函数,支持多通道,uchar和float两种数据类型,经测试,与OpenCV3.1结果完全一致. 实现代码fli ...

  4. ajax设置自定义头

    一.setting参数 headers $.ajax({ headers: {        Accept: "application/json; charset=utf-8"  ...

  5. 「暑期训练」「基础DP」FATE（HDU-2159）

    题意与分析 学习本题的时候遇到了一定的困难.看了题解才知道这是二重背包.本题的实质是二重完全背包.二维费用的背包问题是指:对于每件物品,具有两种不同的费用,选择这件物品必须同时付出这两种代价:对于每种 ...

  6. 「个人训练」Radar Installation（POJ-1328）

    这条题目A了十次...emmmmm 其实不难就是一个贪心.... 先说下算法(之前的和现在的) 之前考虑的其实很简单.用平面几何即可将雷达可以放置的区域转化为区间(顺便判断是否无解.问题就比较简单了: ...

  7. Mysql性能优化四：分库，分区，分表，你们如何做？

    分库分区分表概念 分区 就是把一张表的数据分成N个区块,在逻辑上看最终只是一张表,但底层是由N个物理区块组成的 分表 就是把一张数据量很大的表按一定的规则分解成N个具有独立存储空间的实体表.系统读写时 ...

  8. Mapper的方式总结

    Mapper的方式总结: <mappers> <!-- 通过package元素将会把指定包下面的所有Mapper接口进行注册 --> <package name=&quo ...

  9. 数论3——gcd&&lcm

    gcd(a, b),就是求a和b的最大公约数 lcm(a, b),就是求a和b的最小公倍数 然后有个公式 a*b = gcd * lcm     ( gcd就是gcd(a, b), ( •̀∀•́ ) ...

  10. lintcode-104-合并k个排序链表

    104-合并k个排序链表 合并k个排序链表,并且返回合并后的排序链表.尝试分析和描述其复杂度. 样例 给出3个排序链表[2->4->null,null,-1->null],返回 -1 ...