对于前端开发者来说，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. PHP.42-TP框架商城应用实例-后台17-商品属性3-商品分类的修改与删除

    商品分类的修改 1.改表单Goods/edit.html,加下拉框 2.因为商品属性修改涉及商品属性表goods_attr{id,attr_value,attr_id,goods_id}与属性表att ...

  2. 4364: [IOI2014]wall砖墙

    4364: [IOI2014]wall砖墙 链接 分析: 线段树,维护一个最大值,一个最小值. 代码: #include<bits/stdc++.h> ],*p1 = buf,*p2 = ...

  3. Hibernate-ORM:07.Hibernate中的参数绑定

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客会讲解Hibernate中的参数绑定,就是相当于sql语句中的where后面的条件 一,讲解概述: 1 ...

  4. Tensorflowonspark安装

    1.实验环境 Centos7+Python3.6+Java8+Hadoop2.6+Spark2.3+Tensorflow1.10.0 2.Tensorflow安装 最简单的方式:pip install ...

  5. pandas DataFrame的修改方法

    pandas DataFrame的增删查改总结系列文章: pandas DaFrame的创建方法 pandas DataFrame的查询方法 pandas DataFrame行或列的删除方法 pand ...

  6. 关于c++的头文件依赖

    正在看google c++编程规范,里面对头文件依赖是这么说的: 使用前置声明(forward declarations)尽量减少.h文件中#include的数量. 当一个头文件被包含的同时也引入了一 ...

  7. 软工实践 - 第二十六次作业 Beta 冲刺（4/7）

    队名:起床一起肝活队 组长博客:https://www.cnblogs.com/dawnduck/p/10124816.html 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过 ...

  8. NHibernate3.3.3 学习笔记1

    前言 昨天在园友的介绍下,我找了一本学习NHibernate的书:<NHibernate 3 Beginner’s Guide>. 第一章我直接跳过了,因为是英文版的看起来很吃力,且第一章 ...

  9. PAT 1030 完美数列

    https://pintia.cn/problem-sets/994805260223102976/problems/994805291311284224 给定一个正整数数列,和正整数 p,设这个数列 ...

  10. DataGridView使用

    DataGridView控件概述 DataGridView 控件代码目录(Windows 窗体) 未绑定数据列 定义:可能想要显示并非来自数据源的一列数据,这种列称为未绑定列. 数据格式示例 如何:设 ...