layui将按钮固定在弹出框的底部位置，不滚动

最新推荐文章于 2024-01-14 21:16:09 发布

原创最新推荐文章于 2024-01-14 21:16:09 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

layUI 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用layui框架将按钮固定在弹出框底部的方法，通过设置div元素为fixed定位并指定bottom为0，实现按钮始终显示在弹出框底部，即使内容滚动也不受影响。

layui将按钮固定在弹出框的底部位置，不滚动

<div class="layer-footer" style="position: fixed; bottom: 0;background-color:#ddd;width:100%;height:50px" >
            <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">确认</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">取消</button>
        </div>

主要代码：

<div class="layer-footer" style="position: fixed; bottom: 0;background-color:#ddd;width:100%;height:50px" >

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

设计师的小猪

关注关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Layui】表单赋值 / 取值与任意位置按钮提交表单

德仔

09-20

2603

1.通常表单赋值，通过Jquery赋值，每给标签单独赋值，显得非常笨着，希望直接可以给form表单赋值。key-value方式。2.在v2.7.0之前提交表单，按钮必须在表单内才可以直接获取表单data,如果在任意位置，则需要捕获标签取值，然后组装成对象，序列化对象传入后台，代码量大而且容易出错。

Java Selenium学习笔记(八)：下拉选择框、警告框、滚动条操作

我们仨

03-18

973

1.下拉选择框 1.1 Select类是什么？ Select类是WebDriver为解决select标签定位诞生的，此类定位的是select标签！ 1.2 Select类的方法 selectByIndex()：根据option索引来定位，从0开始 selectByValue()：根据option属性的value值进行定位 selectByVisibleText()：根据文本值实现定位 ...

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

缪说 2021.05.13
完美啊，简单明了

固定底部悬浮在底部css效果顶部layui

webnoties的专栏

01-14

913

css固定底部悬浮在底部顶部。

layUi弹窗弹窗关闭按钮显示在标题栏的下方-解决

weixin_42408667的博客

11-25

2204

使用layUi前端框架，弹窗时，关闭按钮不固定，不在右上角展示，原因是少了一个div 结尾

layui 分页固定底部_卡座底部掏空，又能当做餐厅和换鞋凳来用，还增加了置物空间...

weixin_39650756的博客

11-02

252

现在房价越来越贵，只涨不跌。有些地方真的寸金寸土，买了房1平米也舍不得浪费。朋友家为了节省空间，设计了卡座，虽然很实用，但是我发现他家卡座底部掏空，但是这样的设计真的好吗？朋友家卡座底部掏空的设计也很简单，定制一个卡座，中间封闭起来，两边掏空，这样的设计可以利用空间，又能当做餐厅和换鞋凳来用，还增加了置物空间。但是底部掏空的设计相比优点来说，还有3大缺点：① 容易藏灰这个卡座的尺寸并不小，但是底部...

关闭layui弹出层，弹出层出现在HTML下方的问题

weixin_52516170的博客

08-08

1041

在使用layui弹出层弹出登录表单的时候，发现关闭登录弹窗后，发现弹窗出现在HTML页面的下方的问题。$('#login').hide()}即可。在下方添加代码： end:function(){

Layui弹出框滚动条下方按钮

07-17

对于 Layui 弹出框中的滚动条下方按钮，你可以通过以下步骤实现： 1. 首先，确保你已经引入了 Layui 的相关资源文件。 2. 在弹出框的内容区域中，添加一个容器元素，用来包裹需要显示的内容以及滚动条。 3. 在该...

基于Layui框架实现的聊天功能界面设计

07-10

首先，Layui框架为开发者提供了一系列丰富的组件，这些组件包括按钮、面板、标签页、弹出框等，它们可以帮助开发者快速构建出美观的用户界面。在聊天功能界面设计中，可以使用Layui提供的卡片（card）、表单（form）...

jquery 插件弹出层回到顶部底部

10-17

本文将详细探讨与“jquery 插件弹出层回到顶部底部”相关的知识点，帮助你理解和应用这些技术。首先，jQuery插件是扩展jQuery功能的一种方式，它们通常包含一组预定义的函数，可以方便地添加到项目中以增强网站...

layui时间选择器在手机端使用时，点击年份或者月份时，出现的年份以及月份选择框会和本身的时间选择器出现重叠重合，显示异常

最新发布

08-09

由于移动端屏幕小，我们可以将弹出层设置为垂直居中或者固定在底部等。具体CSS代码示例（需要根据实际生成的DOM结构来调整）： ```css /* 针对移动端的时间选择器弹出层 */ .layui-m-laydate .layui-laydate-...

layui 分页固定底部_分享：温室大棚是一种相对固定和长期的种植设备

weixin_39610594的博客

11-07

294

秋季温室大棚建于8月。这通常是秋季收获的开始，温室大棚中的一批蔬菜将在春节前收到。由于温室是一种相对固定和长期的种植设备，它需要能源和财政资源。因此，有必要在创作之前进行规划，特别是大型集中棚基和自然环境。科学合理安排基地的温室，道路，沟渠，水池，房屋等设备的方向和布局，以确保未来生产管理的便利和土地的有用利用，并为高层奠定基础生产力和效率。一般来说，运输应方便，地形平整，开放，排水方便。有水...

layer 弹窗在可视区下方弹出显示问题

贵林之恋的博客

10-25

4051

想让弹窗在可视区的下方弹出，显示的效果：代码：但是有时候弹窗显示不完整，如下图所示：（1）设置 area: 'auto' ，多刷新几次页面也会出现显示不完整的情况，（2）设置 area: ['400px', 'auto'] ，多刷新几次页面也会出现显示不完整的情况，（3）设置 area: ['400px', '40%'] ，多刷新几次页面也会出现显示不完整的情况， ...

layui-设置div固定在页面上不随滚动条滚动

qq_43604300的博客

08-08

2402

思考：腾讯云的服务器购买界面，选择不同的配置会显示对应的价格，价格框固定在页面底部，不会随着滚动条滚动而滚动，便于用于查看价格。这里实现的是固定这个价格框，使其不会滚动。layui中div的属性设置放在CSS中，首先设置一个CSS样式。最终的效果显示是这样的，即使滚动页面也不会，这个价格框也不会动。然后在body中引用。...

弹出层中div固定在底部【有滚动条】

东明之羞的博客

10-22

3620

再在弹出层中，如果有滚动条的情况下，要是元素固定在底部时，不能使用position:fixed,fixed属性是相对浏览起来说的，对弹出层已经明显不再使用。如下图如果使用fixed就会使小图出现在浏览器的右下角，而不是弹出层的右下角这种情况下只能使用 js监听滚动条位置，来处理div位置效果图代码简单的例子，所以html和javascript代码放一起了 &lt;html&gt; ...

00019-layui 控制 layer.open 的按钮

06-02

2156

三个按钮： ,btn: [‘拨打’,‘挂断’,‘关闭’] ‘拨打’,‘挂断’ 这两个是不同时出现的。 var dialog = layer.open({ type: 2 ,title: '拨打电话' ,content: 'customerPhone.jsp' ,maxmin: true ,area: layui.setter.area_percent ,offset:'t' ,btn: ['拨打','挂断','关闭'] ,btnAlign: '

LayUi分页工具栏置底实现

Abdullahi_kanye的博客

04-20

6450

前提是已经做好了分页显示数据的功能，并能实现每页显示数据条数的参数设置。此处我用的是js方式创建的数据表格。所以要实现分页功能就只需要在js创建表格中加个page: true这个数据即可 page: true 问题：但是如果当一页的数据条数少于规定的每页显示的条数时（数据表格最后一页会出现的情况），分页工具栏不会置底，而是会显示在最后一条数据的后面。会影响其他的功能，比如弹出框高度等等。 ...

layui使按钮居中_button按钮居中的方法

weixin_28864485的博客

01-27

9549

今天在写页面时，发现给button按钮设置居中时，css页面写了text-align="center"，但是不起作用，用了display属性也无作用，试了好多次发现要给button按钮添加个p，然后让p居中就可以了。以下写个test来说明下：p,input,button{text-align: center;}你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好...

layui的内置方法。页面右下角固定块、倒计时、时间距离当前时间多久、数字前置补零

肖肖肖丽珠的博客

07-28

1623

页面的右下角出现一个这样的图标。位置固定不随页面滚动。通常用在回到顶部或者是咨询信息。需要自己写点击之后的触发事件 layui.use('util', function(){ var util = layui.util; //执行 util.fixbar({ bar1: true ,click: function(type){ console.log(type); if(ty...

layui的基本使用(布局，栅格，按钮)

serendipity_xr的博客

08-24

6996

layui 一.layui概述官网：https://www.layui.com/ 官方文档：https://www.layui.com/doc/ 1.layui下载在浏览器中输入https://www.layui.com/会出现以下界面点击立即下载进行下载下载后并进行解压 2.layui目录结构二.layui基本使用 1.引入核心文件 <head> <meta charset="UTF-8"> <title>layui的使用</t