Sticker-footer弹出层布局

落日映苍穹つ 2022-05-27 07:20 69阅读 0赞

# 前端布局中，经常需要用到点击弹出层这种场景，Sticker-footer布局就派上用场了。   下面演示该场景用于在vue.js项目中。 #

## 1.新建base.js ##

.clearfix\{

display: inline-block;

\}

.clearfix:after\{

display: block;

content: ".";

height: 0;

line-height: 0;

clear: both;

visibility: hidden;

\}

## 2.将base.js引入到index.html中 ##

< html >

< head >

< meta charset= "utf-8" >

< meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

< title >search </ title >

< link rel= "stylesheet" type= "text/css" href= "static/css/reset.css" >

< link rel= "stylesheet" type= "text/css" href= "static/css/iconfont.css" >

**<link rel="stylesheet" type="text/css" href="static/css/base.css">//在此引入**

</ head >

< body >

< div id= "app" ></ div >

</ body >

</ html >

## 3.在div+css中应用布局 ##

< div class= "detail" v-show=" detailShow" >

< div class= "detail-wrapper clearfix" >

</ div >

< div class= "detail-close" @click=" hideDetail()" >

< i class= "iconfont icon-close" ></ i >

</ div >

</ div >

.detail\{

position: fixed;

top: 0;

left: 0;

z-index: 100;

width: 100%;

height: 100%;

overflow: auto;

background: rgba( 7, 17, 27, 0.8);

.detail-wrapper\{

min-height: 100%;

width: 100%;

\}

.detail-close\{

position: relative;

width: 32px;

height: 32px;

margin: \-64px auto;

clear: both;

font-size: 32px;

.iconfont\{

& .icon-close\{

color: white;

height: 64px;

width: 64px;

\}

\}

\}

\}

默认是占据全屏半透明的，根据实际情况修改即可，这个方法真的很实用，哈哈，以后弹出层布局就方便了，你学会了吗？

发表评论取消回复

表情：

评论列表（有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

相关 layer 弹出层

使用方法：一、引入 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></scrip

约定不等于承诺〃/ 2022年07月24日 07:03/ 0 赞/ 303 阅读

相关 jquery 弹出层

easyDialog在经过一段时间的使用后，对使用中碰到的一些问题进行了总结，最近花了点时间对原来的代码进行了重构和优化，并加入了一些新功能。原来的版本只是为了实现简单的弹出层

迷南。/ 2022年06月04日 04:29/ 0 赞/ 235 阅读

相关 Sticker-footer弹出层布局

前端布局中，经常需要用到点击弹出层这种场景，Sticker-footer布局就派上用场了。下面演示该场景用于在vue.js项目中。 1.新建base.js .

落日映苍穹つ/ 2022年05月27日 07:20/ 0 赞/ 70 阅读

相关 layui弹出层闪退，layer弹出层闪退，layer弹出层坑

转载: http://www.mamicode.com/info-detail-1654730.html 今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事

桃扇骨/ 2022年05月22日 04:30/ 1 赞/ 430 阅读

相关 LayUi 之弹出层

这个东西应该不是很难，用到的东西也不是很多，但是弹出层却是贤心的一大亮点，所以我们还是有必要重视一下，哈哈~ 弹出层所涉及到的东西还是很多的，就比如蒙层啊，双层弹出框，

客官°小女子只卖身不卖艺/ 2022年05月20日 04:27/ 0 赞/ 340 阅读

相关 javascript实现弹出层

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

骑猪看日落/ 2022年05月17日 11:07/ 0 赞/ 190 阅读

相关 layui——弹出层

$("createUser").click(function () { layer.open({ type:2

梦里梦外;/ 2022年05月12日 14:04/ 0 赞/ 336 阅读

相关 js弹出层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年04月11日 03:27/ 0 赞/ 280 阅读

相关 Layui的弹出层

1：先在HTML页面上放一个button按钮，给按钮ID，设置样式，按钮的作用就是弹出layui的open层： <button|type=“button”|id="O

逃离我推掉我的手/ 2022年01月22日 03:09/ 0 赞/ 796 阅读

相关 layer弹出层

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layu

清疚/ 2021年09月15日 07:26/ 0 赞/ 540 阅读