对于前端开发者来说，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. WPF中使用第三方字体选择器

    原文:WPF中使用第三方字体选择器 起因 到WPF的字体可以设置的东西变得非常的多,而却没有提供专用的字体选择对话框,甚至于WinFrom的FontDialog也是不能直接用来设置WPF中的字体.解决 ...

  2. Hadoop启动后无法启动NodeManager

    在配置完Hadoop集群后,使用命令:“start-all.sh”进行启动集群.然后使用命令:“jps”查看进程启动情况,发现没有NodeManager 只需要使用命令:cd  /usr/local/ ...

  3. PIC32MZ 通过U盘在线升级 -- USB Host bootloader

    了解bootloader的实现,请加QQ: 1273623966(验证填bootloader); 欢迎咨询或定制bootloader; 我的博客主页 www.cnblogs.com/geekygeek ...

  4. 玩转Vim-札记（二）

    玩转Vim-札记(二) 距上篇博文已有一周有余,上次主要介绍了编辑器之神Vim的起源.安装并介绍了两种模式以及一些简单的操作.本次将继续对Vim的使用进行介绍. 登堂入室 首先接着说移动吧: 0 → ...

  5. es2017中的async和await要点

    1. async和await最关键的用途是以同步的写法实现了异步调用,是对Generator异步方法的简化和改进.使用Generator实现异步的缺点如下: 得有一个任务执行器来自动调用next() ...

  6. 第二十一篇 json，picklz，xml模块

    Json模块 Json模块比较简单,仅有四个方法dumps()和loads()方法,dump()和load()方法,但是却非常的常用,实用性极强. 如果要在不同的编程语言之间传递对象,就必须把对象序列 ...

  7. python 网络篇(计算机网络基础)

                               计算机网络的发展及基础网络概念                    广播 主机之间“一对所有”的通讯模式,网络对其中每一台主机发出的信号都进行无 ...

  8. 当因式分解遇见近邻:一种多层面协同过滤模型（SVD++）

    本文地址:https://www.cnblogs.com/kyxfx/articles/9392086.html actorization Meets the Neighborhood: a Mult ...

  9. DFS——hdu5682zxa and leaf

    一.题目回顾 题目链接:zxa and leaf Sample Input 2 3 2 1 2 1 3 2 4 3 9 6 2 1 2 1 3 1 4 2 5 2 6 3 6 5 9   Sample ...

  10. winform 外部组件发生异常

    问题描述.先前程序运行可以正常,但是突然这次调试就弹出此异常: 解决方法:1.本次调试是不是重新生成解决方案了?应该是因为之前的解决方案删了,把引用的dll(包含此dll关联的dll)自动删掉: 2. ...