html 弹出层 特效代码,javascript实现弹出层效果

最新推荐文章于 2024-08-11 00:51:52 发布
最新推荐文章于 2024-08-11 00:51:52 发布
阅读量473 收藏
点赞数
文章标签： html 弹出层 特效代码
本文介绍了如何使用HTML、Animate和ES6来创建弹出层动画，包括从四个方向（上、右、下、左）的滑动效果。弹出层在现代前端开发中广泛应用，如支付宝支付场景。通过CSS动画定义了弹出和隐藏的过渡效果，JavaScript部分则用于控制弹层的显示和隐藏，以及处理按钮点击事件。文章强调了使用z-index和opacity而非display来实现动画的平滑性，并提供了事件处理函数的实现细节。
摘要由CSDN通过智能技术生成

弹出层和弹窗相似但是并不相同；弹窗和弹出层都是由用户触发的显示提示信息的弹出面板；但是弹窗只是显示一些信息，没有太多的复杂的交互事件；而弹层类似一个整个页面，可以实现页面的所有功能；

现在前端弹层使用的很频繁，如支付宝支付弹层等…所以掌握弹层是一个很重要的技能。如果只是简单的隐藏和切换，当然就不必说，我要说的html+animate+es6实现弹层；

a85787f98ea4e7b47075aa69c558db1b.png

2114b65d2785078a2ca952fc71437fbc.png

20d1d2b4f8497b2a5c69cd5ccb9c106e.png

bf29404bb4e706c088966eb2e9054cb5.png

html弹层结构：

This is Header

  • 上弹层
  • 右弹层
  • 下弹层
  • 左弹层

This is Footer

  • 取消
  • 确认

css代码：

@mixin slide-top{

0%{

-webkit-transform: translate3d(0, -400%, 0);

-moz-transform: translate3d(0, -400%, 0);

-ms-transform: translate3d(0, -400%, 0);

-o-transform: translate3d(0, -400%, 0);

transform: translate3d(0, -400%, 0);

}

100%{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

}

@keyframes slideTop{

@include slide-top;

}

@-webkit-keyframes slideTop{

@include slide-top;

}

@mixin slide-top-hide{

0%{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

100%{

-webkit-transform: translate3d(0, -400%, 0);

-moz-transform: translate3d(0, -400%, 0);

-ms-transform: translate3d(0, -400%, 0);

-o-transform: translate3d(0, -400%, 0);

transform: translate3d(0, -400%, 0);

}

}

@keyframes slideTopHide{

@include slide-top-hide;

}

@-webkit-keyframes slideTopHide{

@include slide-top-hide;

}

@mixin slide-right{

0%{

-webkit-transform: translate3d(400%, 0, 0);

-moz-transform: translate3d(400%, 0, 0);

-ms-transform: translate3d(400%, 0, 0);

-o-transform: translate3d(400%, 0, 0);

transform: translate3d(400%, 0, 0);

}

100%{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

}

@keyframes slideRight{

@include slide-right;

}

@-webkit-keyframes slideRight{

@include slide-right;

}

@mixin slide-right-hide{

0%{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

100%{

-webkit-transform: translate3d(400%, 0, 0);

-moz-transform: translate3d(400%, 0, 0);

-ms-transform: translate3d(400%, 0, 0);

-o-transform: translate3d(400%, 0, 0);

transform: translate3d(400%, 0, 0);

}

}

@keyframes slideRightHide{

@include slide-right-hide;

}

@-webkit-keyframes slideRightHide{

@include slide-right-hide;

}

@mixin slide-bottom{

0%{

-webkit-transform: translate3d(0, 400%, 0);

-moz-transform: translate3d(0, 400%, 0);

-ms-transform: translate3d(0, 400%, 0);

-o-transform: translate3d(0, 400%, 0);

transform: translate3d(0, 400%, 0);

}

100%{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

}

@keyframes slideBottom{

@include slide-bottom;

}

@-webkit-keyframes slideBottom{

@include slide-bottom;

}

@mixin slide-bottom-hide{

0%{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

100%{

-webkit-transform: translate3d(0, 400%, 0);

-moz-transform: translate3d(0, 400%, 0);

-ms-transform: translate3d(0, 400%, 0);

-o-transform: translate3d(0, 400%, 0);

transform: translate3d(0, 400%, 0);

}

}

@keyframes slideBottomHide{

@include slide-bottom-hide;

}

@-webkit-keyframes slideBottomHide{

@include slide-bottom-hide;

}

@mixin slide-left{

0%{

-webkit-transform: translate3d(-400%, 0, 0);

-moz-transform: translate3d(-400%, 0, 0);

-ms-transform: translate3d(-400%, 0, 0);

-o-transform: translate3d(-400%, 0, 0);

transform: translate3d(-400%, 0, 0);

}

100%{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

}

@keyframes slideLeft{

@include slide-left;

}

@-webkit-keyframes slideLeft{

@include slide-left;

}

@mixin slide-left-hide{

0%{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

100%{

-webkit-transform: translate3d(-400%, 0, 0);

-moz-transform: translate3d(-400%, 0, 0);

-ms-transform: translate3d(-400%, 0, 0);

-o-transform: translate3d(-400%, 0, 0);

transform: translate3d(-400%, 0, 0);

}

}

@keyframes slideLeftHide{

@include slide-left-hide;

}

@-webkit-keyframes slideLeftHide{

@include slide-left-hide;

}

@mixin popup-hide{

0%{

z-index: 99999;

opacity: 1;

}

100%{

z-index: -1;

opacity: 0;

}

}

@keyframes popupHide{

@include popup-hide;

}

@-webkit-keyframes popupHide{

@include popup-hide;

}

.popup{

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

opacity: 0;

.popup-bg{

position: absolute;

top: 0;

left: 0;

background: rgba(0,0,0, 0.5);

width: 100%;

height: 100%;

z-index: 1;

}

.popup-wrapper{

position: relative;

width: 70%;

height: 70%;

margin: auto;

background: #fff;

border-radius: 5%;

z-index: 100;

}

&.hidden{

display: none;

}

&.show{

z-index: 99999;

opacity: 1;

&.top{

.popup-wrapper{

-webkit-animation: slideTop 0.6s linear forwards;

-moz-animation: slideTop 0.6s linear forwards;

-ms-animation: slideTop 0.6s linear forwards;

-o-animation: slideTop 0.6s linear forwards;

animation: slideTop 0.6s linear forwards;

}

}

&.right{

.popup-wrapper{

-webkit-animation: slideRight 0.6s linear forwards;

-moz-animation: slideRight 0.6s linear forwards;

-ms-animation: slideRight 0.6s linear forwards;

-o-animation: slideRight 0.6s linear forwards;

animation: slideRight 0.6s linear forwards;

}

}

&.bottom{

.popup-wrapper{

-webkit-animation: slideBottom 0.6s linear forwards;

-moz-animation: slideBottom 0.6s linear forwards;

-ms-animation: slideBottom 0.6s linear forwards;

-o-animation: slideBottom 0.6s linear forwards;

animation: slideBottom 0.6s linear forwards;

}

}

&.left{

.popup-wrapper{

-webkit-animation: slideLeft 0.6s linear forwards;

-moz-animation: slideLeft 0.6s linear forwards;

-ms-animation: slideLeft 0.6s linear forwards;

-o-animation: slideLeft 0.6s linear forwards;

animation: slideLeft 0.6s linear forwards;

}

}

}

&.hide{

-webkit-animation: popupHide 0.7s linear forwards;

-moz-animation: popupHide 0.7s linear forwards;

-ms-animation: popupHide 0.7s linear forwards;

-o-animation: popupHide 0.7s linear forwards;

animation: popupHide 0.7s linear forwards;

&.top{

.popup-wrapper{

-webkit-animation: slideTopHide 0.6s linear forwards;

-moz-animation: slideTopHide 0.6s linear forwards;

-ms-animation: slideTopHide 0.6s linear forwards;

-o-animation: slideTopHide 0.6s linear forwards;

animation: slideTopHide 0.6s linear forwards;

}

}

&.right{

.popup-wrapper{

-webkit-animation: slideRightHide 0.6s linear forwards;

-moz-animation: slideRightHide 0.6s linear forwards;

-ms-animation: slideRightHide 0.6s linear forwards;

-o-animation: slideRightHide 0.6s linear forwards;

animation: slideRightHide 0.6s linear forwards;

}

}

&.bottom{

.popup-wrapper{

-webkit-animation: slideBottomHide 0.6s linear forwards;

-moz-animation: slideBottomHide 0.6s linear forwards;

-ms-animation: slideBottomHide 0.6s linear forwards;

-o-animation: slideBottomHide 0.6s linear forwards;

animation: slideBottomHide 0.6s linear forwards;

}

}

&.left{

.popup-wrapper{

-webkit-animation: slideLeftHide 0.6s linear forwards;

-moz-animation: slideLeftHide 0.6s linear forwards;

-ms-animation: slideLeftHide 0.6s linear forwards;

-o-animation: slideLeftHide 0.6s linear forwards;

animation: slideLeftHide 0.6s linear forwards;

}

}

}

}

html,

body,

.main{

width: 100%;

height: 100%;

overflow: hidden;

}

.head,

.body,

.foot{

width: 100%;

}

.head,

.foot{

height: 15%;

}

.body{

height: 70%;

}

.gray-theme{

background: #333;

color: #fff;

}

.btn-list{

width: 40%;

min-width: 270px;

height: 38px;

.btn-box{

width: 22%;

height: 100%;

padding-right: 4%;

&:last-child{

padding-right: 0;

}

}

}

.btn{

line-height: 1em;

width: 100%;

height: 100%;

border-radius: 10%;

font-size: 16px;

background: green;

color: #ff0;

text-align: center;

vertical-align: middle;

cursor: pointer;

}

js代码：

class PopupComponent {

constructor() {

this.btnGroupEl = document.getElementsByClassName("btn-group")[0];

this.popupEl = document.getElementsByClassName("popup")[0];

this.popupBGEl = this.popupEl.querySelector(".popup-bg");

this.popupTitleEl = this.popupEl.querySelector(".popup-wrapper .title");

this.popupBodyEl = this.popupEl.querySelector(".popup-wrapper .body");

this.cancelBtnEl = this.popupEl.querySelector(".popup-wrapper .btn.cancel");

this.confirmBtnEl = this.popupEl.querySelector(".popup-wrapper .btn.confirm");

this.popupElClasslist = this.popupEl.classList;

this.LEGVALS = ["top", "right", "bottom", "left"];

this.detaultPosition = "";

this.position = "";

this.SHOWCLASSNAME = "show";

this.HIDECLASSNAME = "hide";

this.HIDDENCLASSNAME = "hidden";

}

/**

* 给弹窗的标题和主体添加内容

* @param Object contentObj 传递的对象

*/

setContentForPopup(contentObj = {'title':'title', 'body': 'body'}) {

try{

if (!TB.isObject(contentObj)) {

throw new Error("The param of setContentForPopup function error!");

}

let value;

for (let prop in contentObj) {

if (!contentObj.hasOwnProperty(prop)) {

continue;

}

if (prop === 'title') {

value = contentObj[prop];

this.popupTitleEl.innerText = value;

}

if (prop === 'body') {

value = contentObj[prop];

this.popupBodyEl.innerText = value;

}

}

} catch (e) {

console.log("Popup element is not exist!");

console.error(e);

}

}

/**

* 删除弹窗的类名

* @return void

*/

deletePopupPreviousClassName() {

if (this.HIDDENCLASSNAME && KB.checkType.isString(this.HIDDENCLASSNAME)) {

this.popupElClasslist.remove(this.HIDDENCLASSNAME);

}

if (this.detaultPosition && KB.checkType.isString(this.detaultPosition)) {

this.popupElClasslist.remove(this.detaultPosition);

}

this.detaultPosition = this.position;

}

/**

* 弹窗隐藏

* @return void

*/

popupHide() {

if (this.popupElClasslist.contains(this.SHOWCLASSNAME)) {

this.popupElClasslist.remove(this.SHOWCLASSNAME);

this.popupElClasslist.add(this.HIDECLASSNAME);

}

}

/**

* 弹窗显示

* @return void

*/

popupShow() {

this.deletePopupPreviousClassName();

if (this.popupElClasslist.contains(this.HIDECLASSNAME)) {

this.popupElClasslist.remove(this.HIDECLASSNAME);

this.popupElClasslist.add(this.SHOWCLASSNAME);

this.popupElClasslist.add(this.position);

}

this.setContentForPopup({

'title': this.position + ' title',

'body': this.position + ' body',

});

}

/**

* 按钮容器的点击事件

* @param Object e 点击的事件event

* @return void

*/

btnGroupClickEvent(e) {

let btnEl = e.target || e.srcElement;

if (!TB.isElement(btnEl)) {

throw new Error("Get btn element error!");

}

this.position = btnEl.getAttribute("data-position");

if (!TB.isString(this.position) || (this.LEGVALS.indexOf(this.position) < 0)) {

throw new Error("Can not get position value from btn element!");

}

this.popupShow();

}

/**

* 给DOM元素添加点击事件

* @param Object elem 添加点击事件的dom元素

* @param Function fn 触发事件调用的回调函数

*/

addClickEventFormElem(elem, fn) {

TB.addHandler.call(this, elem, 'click', fn, false);

}

/**

* 初始化函数

* @return void

*/

init() {

this.addClickEventFormElem(this.btnGroupEl, this.btnGroupClickEvent);

this.addClickEventFormElem(this.cancelBtnEl, this.popupHide);

this.addClickEventFormElem(this.confirmBtnEl, this.popupHide);

}

}

let popupComponent = new PopupComponent();

popupComponent.init();

TB.addHandler：

/*

* 给DOM元素添加事件

* @param void

* @return callback function 回调函数

* */

function addHandler(elem, type, callback, useCapture) {

var checkType = checkArgumentType(),

_document = document,

_callback = checkType.isFunction(callback)? callback:function(){},

_self = this;

if (!checkType.isElement(elem) || !checkType.isString(type)) {

return;

}

if (_document.addEventListener) {

addHandler = function(elem, type, callback, useCapture) {

elem.addEventListener(type, function(e) {

_callback.call(_self, e);

}, useCapture || false);

}

} else if (_document.attachEvent) {

addHandler = function(elem, type, callback, useCapture) {

elem.attachEvent("on" + type, function(e){

_callback.apply(_self, [e]);

});

}

} else {

addHandler = function(elem, type, callback, useCapture) {

elem["on" + type] = function(e) {

_callback.call(_self, e);

};

}

}

addHandler(elem, type, callback, useCapture);

}

首先说一下弹窗的DOM结构：

在外层一般是绝对定位，并使用flex布局使得内容居中；它的直接子元素一般有两个，黑色背景层和内容容器；如图所示：

cfeb5c6ddea5e76c6bbd2d5af2c00e83.png

样式的动画相信前端的同学一般都知道怎么做；但是有一点要注意，不要试图使用display来实现动画；

我使用的解决的办法是首先

动画的显示隐藏使用的z-index和opacity；但是这样存在开始时，弹窗会缓缓隐藏，那么我们可以用一个类表示display: none;点击显示弹层时，移除该类即可；

对于js没什么好说的，无非是操作类名；但是有一点要注意事件注册和this的指向;

注意我的addHandler函数，该函数只会判断一次浏览器的环境，不需要反复的判断浏览器的环境；

在btnGroupClickEvent函数中this是指向PopupComponent类，而不是事件的event;所以addHandler函数中首先保存this的指向，然后使用call或者apply改变this的指向

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

weixin_39951773
关注
html弹出层效果
03-11
HTML弹出层效果类似于很多网站的点击登录按钮弹出一个固定窗口的登录框；这里只是一个小小的实例
html、css 实现网页弹出层
热门推荐
Zhangguohao666的博客
12-05 1万+
只使用html、css，一步步教你实现网页弹出登录窗口
HTML实现弹出层
最新发布
业精于勤荒于嬉，行成于思毁于随
08-11 555
位置。并排显示：某度上的图片代码：6.3.弹出层.html。
一个流行的弹出层的效果
jxufewbt的专栏
06-06 1196
 var docEle = function() {  return document.getElementById(arguments[0]) || false; } function openNewDiv(_id) {  var m = "mask";  if (docEle(_id)) document.removeChild(docEle(_id));  if (docEle(m))
(js特效) js代码实现弹出层
zhouzhiwengang的专栏
04-01 1189
源代码： LIGHTBOX EXAMPLE .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%;
漂亮的html弹出层弹出窗口
09-20
漂亮的弹出层，弹出窗口的jquery方法，forZDialogDemo.html为演示页面，为普通的html开发提供便利，非常方便，漂亮，适用于各种浏览器，兼容性好
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
10-16
本文档将介绍如何使用JavaScript和jQuery实现弹出遮罩层特效，并对页面元素以及属性进行动态操作。 首先，了解遮罩层特效的基本概念，这是在用户与网页交互时，为了增强用户体验而临时覆盖在页面上的一种半透明层。...
jquery实现的弹出层登录和全屏层注册特效代码分享
10-23
综上所述，本文通过示例代码展示了如何利用jQuery技术来实现弹出层登录和全屏层注册的特效。这些特效不仅美化了网站的界面，还极大地提升了用户的交互体验。需要注意的是，虽然示例中展示的是登录和注册特效，但同样...
jquery弹出层特效代码
03-20
"jQuery弹出层特效代码"是针对网页交互设计的一个重要工具，它允许开发者创建具有多级弹出、拖拽、尺寸调整、静止定位以及内容自适应高度和宽度的弹出层效果。 首先，让我们深入了解jQuery弹出层的基本原理。弹出层...
带有遮罩弹出层实现登录注册表单代码特效.zip
07-11
在这个压缩包中，开发者可以找到具体的HTML、CSS和JavaScript代码示例，通过查看和学习这些代码，可以了解到如何将所有这些元素整合到一起，创建出一个带有遮罩效果的弹出层登录注册表单。对于想要提升网页交互性的...
HTML5卡片式弹出层左右滑动快递物流信息查看js特效代码.zip
07-11
这款“HTML5卡片式弹出层左右滑动快递物流信息查看js特效代码”是基于HTML5和JavaScript设计的一个创新功能，旨在提供一种用户友好的方式来展示快递物流信息。 首先，我们要理解这个特效的核心组成部分。HTML5卡片...
html5_div弹出层
01-03
html5_div弹出层
js登录弹出层特效
10-26
点击弹出层，点击后弹出一个登录层，在这个层内的内容调用了一个示例页面
非常不错的弹出层特效
10-09
非常不错的页面弹出层特效，可传参数，特随意修改样式及大小。
多种弹出漂浮层JS网页特效
11-10
多种弹出漂浮层JS网页特效
HTML5效果非常全面的模态窗口弹出层插件.zip
07-11
JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript)来编写制作动态特殊效果，比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。务（控制台应用程序、桌面应用程序、WEB应用程序等）
HTML弹出层
zhh0310235的博客
08-06 4786
前几天写了一个弹出层，特此纪念： <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #login { display:none; ...
html 弹出层 特效,jquery制作漂亮的弹出层提示消息特效
weixin_42153691的博客
06-05 688
今天给大家带来一款基于jquery超炫的弹出层提示消息。这款实例页面初始时，一个go按钮。当单击go按钮时，提示强出层以动画形式出现。效果图如下：实现的代码。html代码：GO✔SuccessCheck your email for a booking confirmation. We'll see you soon!OK$('#go').click(function () {go(50);});...
弹出窗口特效
柠檬麻麻
06-18 671
弹出窗口<!DOCTYPE html> <html> <head> <title>jQuery实例1：浮动窗口</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../js/jquery.js"></script> </head> <style>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值