对于前端开发者来说，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. springboot升级到2.x需要改动的地方

    由于需要跟进技术发展的脚步,对原有项目springboot进行2.0升级,但升级并不是说改一下版本就完事了,springboot2.0变动比较多,详细变化可以百度一下,下面针对升级springboot ...

  2. linux 操作之一 如何在linux将本地数据*.sql文件导入到linux 云服务器上的mysql数据库

    liunx 版本ubuntu 16.4 mysql 版本  5.6 1)准备*.sql文件 (* 是准备导入的sql文件的名字) 2)liunx 远程客户端  SecureCRT 7.0 alt+p ...

  3. 使用uniflash串口烧写CC3200的常见问题

    1. 在正常情况下,cc3200的烧写使用的是芯片的PIN55和PIN57,只要把SOP2上拉既可正常烧写,常见问题是烧写的时候没有上拉SOP2,正常运行SOP2留空,IAR只能仿真调试,不能下载程序 ...

  4. 【IOI 2002/FJOI2019】任务安排（超级计算机）

    题目 \(N\) 个任务排成一个序列在一台机器上等待完成(顺序不得改变),这 \(N\) 个任务被分成若干批,每批包含相邻的若干任务.从时刻 \(0\) 开始,这些任务被分批加工,第 \(i\) 个任 ...

  5. AV Foundation 实现文字转语音

    AV Foundation 主要框架 CoreAudio 音频处理框架 扩展学习:<Learning CoreAudio> CoreVideo 视频处理的管道模式,逐帧访问 CoreMed ...

  6. 30分钟快速搭建Web CRUD的管理平台--django神奇魔法

    加上你的准备的时间,估计30分钟完全够用了,因为最近在做爬虫管理平台,想着快速开发,没想到python web平台下有这么非常方便的框架,简洁而优雅.将自己的一些坑总结出来,方便给大家的使用. 准备环 ...

  7. eclipse 关闭validating

    1.起因 validating XXX  总是非常的浪费时间,有时候还会造成程序卡死 2.解决 windows - Perferences - Validation build 全部去掉

  8. ORM选型对比

    ORM框架选型 ORM框架选型 jian A YEAR AGO (2017-04-10) orm, database 选型标准:实现O/R mapping,基于promise,支持原生SQL语句,支持 ...

  9. POJ 3858 Hurry Plotter（DP）

    Description A plotter is a vector graphics printing device that connects to a computer to print grap ...

  10. UnrealEngine4入门(二) 实现一个可用按键控制的球体

    源码摘自官网guide,加上部分自己的理解和注释 接上篇博客 本文实现一个可用WASD控制滚动的球体 先创建一个可见的球体: 在CollidingPawn.cpp的构造函数ACollidingPawn ...