layui模态框不居中的几种解决方法

最新推荐文章于 2023-12-14 15:01:27 发布
最新推荐文章于 2023-12-14 15:01:27 发布
阅读量882 收藏 1
点赞数
分类专栏： 面试 学习路线 阿里巴巴 文章标签： java java进阶 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web18484626332/article/details/124776427
版权

今天在写项目时，发现编写的模态框显示不居中，内容把模态框给撑大了，但没有居中，后来发现只要把窗口变动一下模态框就自动居中了（说明模态框的已经有居中属性了，再设置居中属性没效果），这种效果是不满足需求的。

使用的代码如下：

layer.alert(ckdt.length + '条数据统一密码设置成功!' + '<table id="tabDerive" layui-filter="tabDerive"></table>');

样式：

点击确定

发现模态框没有居中。

后来就找了到了几种方法试了一下，可是没有效果。

但是值得记录一下：

1.当页面缺少下面这个声明时，在页面最上面加上声明就能解决问题。

少了这个声明，导致解析页面时不正确。

在html页面或jsp页面第一行声明**<!Doctype html>**

2.给Body增加一个样式ÿ

最低0.47元/天 解锁文章
web18484626332
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui弹出层的一些总结
weixin_44540616的博客
06-28 981
layui弹出层的一些总结 开发工具与关键技术： layui弹出层的一些总结 作者：李梓良 撰写时间：2019年6月24日 一. 1.offset: ‘auto’ 默认坐标，即垂直水平居中 2.offset: ‘100px’ 只定义top坐标，水平保持居中 3.offset: [‘100px’, ‘50px’] 同时定义top、lef...
layui修改table中的按钮_layui数据表格中如何设置按钮切换（是否置顶）与分页居中...
weixin_36182029的博客
12-23 962
手记1一、数据表格中按钮切换(置顶与取消)在layUI数据表格中是可以使用toolbar设置表格内的按钮使用laytel语法置顶{{#if(d.order>0){}}取消{{#}}}注意：属性lay-event=""是模板的关键所在，值可随意定义使用laytpl循环判断语句来实现。2.在laytpl语句在某些时候会和php有一定的冲突(有个项目遇到过)，这时候就需要用其他方法...
关于layui弹窗中的offset偏移量设置
最新发布
csy520240的博客
12-14 1125
要设置layer弹出层的位置，可以使用layer的offset属性来进行调整。offset属性接受一个包含top和left属性的对象，用来设置弹出层的偏移量。那比如说想要设置right,bottom的偏移量能不能设置？offset默认情况下不用设置。主要就是 offset: ['auto', 'auto'], 与。
layui基础一
xiaoxu的博客
08-19 601
layui 目录结构 ├─css //css目录 │ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：） │ │ ├─laydate │ │ └─layer │ └─layui.css //核心样式文件 ├─font //字体图标目录 └─layui.js //核心库 入门案例 layui 下载到了本地，那么可将其完整地放置到你的项目目录（或静态资源服务器），这是一个基本的入门页面 体现了layui的模块化的思想 <!DOCTYPE html&
转载：html,将元素水平，垂直居中的四种方式
wangshixiu86的专栏
07-30 499
html,将元素水平，垂直居中的四种方式 将元素垂直，水平居中分两种情况：一个是元素尺寸固定，二是元素尺寸不固定 一.尺寸固定 方法1：定位 ，50%，margin负距 .box{ width: 400px; height: 300px; border: 2px solid black; /* 把元素变成定位元素 */ position: absolute; /* 元素距离上，左都为50% */ left: 50%; top: 50%; /* 让元素的左外边距，上外边距为元素宽高...
layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案...
weixin_33704234的博客
12-09 1126
layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案   &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
Layui-form表单不居中解决方法
qq_45116737的博客
02-20 6952
<form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">用户</label> <div class="layui-input-inline"> <input t
BootStrap模态框不垂直居中的解决方法
11-27
本文实例为大家分享了BootStrap模态框不垂直居中的解决方法，供大家参考，具体内容如下 解决问题：BootStrap自带的模态框不垂直居中 解决方案：调用BootStrap为我们提供的方法$(‘.modal’).on(‘show.bs.modal’, ...
解决LayUI数据表格复选框不居中显示的问题
10-16
今天小编就为大家分享一篇解决LayUI数据表格复选框不居中显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Layui数据表格中checkbox位置不居中的方法
12-11
1、情景 使用方法渲染的方式生成数据表格，添加了checkbox，但发现...以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
layui.msg layer.alert 修改设置位置
FsMoDi的博客
12-10 1883
layui.msg layer.alert 修改设置位置
layui按钮中的图标没有居中显示的解决方法
欧菲丽的博客
05-08 2526
加css样式： .layui-btn-xs{ line-height:16px; } .layui-btn-xs i{ font-size:16px!important; } <button class="layui-btn layui-btn-xs"><i class="layui-icon" style="margin: 0px"...
layui列表页滚动时弹出窗无法居中的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
06-24 428
function x_admin_show(title, url, w, h) { if (title == null || title == '') { title = false; } if (url == null || url == '') { url = "404.html"; } if (w == null || w == '') { w = ($(window).width() * 0.9);
layer弹出层不居中解决方案，仅显示遮罩，没有弹窗
ljj2312的专栏
06-12 1万+
问题：项目中遇到layer问题，因为页面加载的图片多，点击删除是layer询问层的弹窗仅显示遮罩层，并不显示弹窗…… 原因：图片太多将layer弹窗挤出屏幕下方，看不见了…… 解决方案：让layer的弹出层居中显示 一、问题描述 用layer做操作结果提示时，发现如果页面超出屏幕的高度时，弹出的提示不是屏幕居中，而是在页面高度的中间，如果一个页面的高度比较大，就看不到提示了。 ...
Layui 弹出层插件
执笔诉情思的博客
06-04 454
Layui 弹出层插件 开发工具与关键技术： Visual Studio 2015 – Layui 作者：廖亚星 撰写时间：2019年 6 月4日 这段时间在做项目页面的搭建，在页面的操作中，会出现很多的弹出层，这能使用户在一个页面中执行更多的操作，而我的项目里面用的弹出层是Layui里面的弹出层插件。 Layui的弹出层插件可以作为独立组件使用，也可以Layui模块化使用 基本参数： type—...
前端LayUI框架快速上手详解(一)
热门推荐
Augenstern_QXL的博客
08-20 5万+
✍ 1、LayUI 和 Bootstrap 有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。 1.1、下载与使用 官网：https://www.layui.com/ 点击立即下载即可 下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。 使用时我们只需引入下述两个文件即可使用 <!-- LayUI的核心CSS文件 --&
layer弹出层不居中
XCMercy
04-28 1万+
原因 layer弹出层如果不设置offset属性，默认是居中弹出。若没有设置offset属性，且不是垂直居中弹出，目前我遇到的情况其原因是：可能由于fixed定位或者absolute定位布局，导致元素脱离文档流，使得body看起来很高，但实际高度并没有被撑开，可以使用chrome开发者工具查看验证一下。 解决 给body加设置高度样式height:100%;...
layer.js解决layer.alert()水平方向不居中问题
养猫的阿甘
04-23 1476
是移动端的使用场景，因为项目需要，使用的是PC端的layer.js，提示文字长的时候layer.alert()就不能居中显示了，就像下面这个样子： 修改之后的效果： 解决方案1：做移动端项目的时候，尽量使用mobile版本的layer.js弹出层插件，如果必须要用PC版本的，那么请看我的解决方案2。 解决方案2：在弹出后检查修正一下弹出的layer弹出层的css，代码如下： var strly = layer.alert(data.errmsg); var strly_left = $('
layui使按钮居中_button按钮居中的方法
weixin_28864485的博客
01-27 9101
今天在写页面时，发现给button按钮设置居中时，css页面写了text-align="center"，但是不起作用，用了display属性也无作用，试了好多次发现要给button按钮添加个p，然后让p居中就可以了。以下写个test来说明下：p,input,button{text-align: center;}你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好...
Css实现水平居中几种方法
05-27
有以下几种方法可以使用CSS实现水平居中： 1. 使用text-align属性将文本居中。这适用于内联元素和文本块元素。 ```css .parent { text-align: center; } ``` 2. 使用margin属性将元素居中。这适用于块级元素。 ```css .parent { display: flex; justify-content: center; } .child { margin: 0 auto; } ``` 3. 使用absolute和transform属性将元素居中。这适用于绝对定位的元素。 ```css .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } ``` 4. 使用flexbox将元素居中。这适用于块级元素。 ```css .parent { display: flex; justify-content: center; align-items: center; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值