对于前端开发者来说，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. Hadoop：WordCount分析

    相关代码: package com.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.P ...

  2. java字符流实现文件间的内容复制

    package com.io.demo1; import java.io.FileReader; import java.io.FileWriter; public class TestFileSTr ...

  3. (3)分布式下的爬虫Scrapy应该如何做-递归爬取方式，数据输出方式以及数据库链接

    放假这段时间好好的思考了一下关于Scrapy的一些常用操作,主要解决了三个问题: 1.如何连续爬取 2.数据输出方式 3.数据库链接 一,如何连续爬取: 思考:要达到连续爬取,逻辑上无非从以下的方向着 ...

  4. Markdown常用的几种语法

    在VScode上面写的,现将代码粘贴如下:(在VScode里运行下即可) # Markdown语法 # Ctrl + k v 打开侧边预览 ## 一.加粗斜体删除线 **这是要加粗的文字** *这是要 ...

  5. LeetCode 3——无重复字符的最长子串

    1. 题目 2. 解答 2.1. 方法一 我们从前往后遍历字符串,start 代表最长子串的起始位置,一开始设置为零. 如果没有遇到重复字符,则更新子串的长度,向后遍历. 如果遇到重复字符时,则更新字 ...

  6. XmlAutoGo

    一个基于 Selenium 3.14.0的脚本执行工具,支持自动化解决方案.Github https://github.com/freeol/XmlAutoGo Document https://xm ...

  7. php中数据类型的强制转换

    1.在PHP开发种在很多的地方要涉及到数据类型的转换,尤其是涉及到金额的数据类型,一定要转换成float类型,否则在入库的时候可能会因为数据类型的不同覆盖掉之前的金额.(字符串和float类型相加) ...

  8. 第十三次ScrumMeeting会议

    第十三次Scrum Meeting 时间:2017/12/1 地点:咖啡馆 人员:策划组美工组 名字 完成的工作 计划工作 蔡帜 完成公式的基本策划,Bug数量产生机制设计 科技树方面机制确定 游心 ...

  9. 转 Using $.ajaxPrefilter() To Configure AJAX Requests In jQuery 1.5

    Using $.ajaxPrefilter() To Configure AJAX Requests In jQuery 1.5 Posted February 18, 2011 at 6:29 PM ...

  10. VirtualBox上安装ubuntu

    当安装完成,重启后,在启动界面出现Please remove the installation medium,then press ENTER.问题? 解决方法:在VirtualBox里面通过iso文 ...