layer.js 中弹框显示不全的问题
在使用 layer.js 做弹框的时候,遇到在浏览器缩小时,弹框显示不全的问题,如下:
这是不行的,因为我们有的时候想缩小浏览器视窗,但是一旦缩小到一定程度,就会把弹窗的关闭按钮遮住一部分,并且主体弹框还会出现上下移动的滚动条,对于客户的体验是很差的
1. 弹窗使用的代码调用如下:
layer.open({
title: false,
type: 2,
content: ['./detail/zhuce.html', 'no'],
area: ['400px', '650px'],
});
从上面的参数看,宽度是固定的,但是为什么窗口缩小之后,显示就不一样了呢
2. 怀疑是css 引起的,这里影响的是关闭按钮,查看关闭按钮的css,如下:
.layui-layer-setwin .layui-layer-close2 {
position: absolute;
right: -28px;
top: -28px;
width: 30px;
height: 30px;
margin-left:;
background-position: -149px -31px;
}
可以看出,关闭按钮的位置是有点超出了主体的,那么把关闭按钮移动到主体内,是否可以ok呢?在css 中加入以下设置:
.layui-layer-setwin .layui-layer-close2 {
right: -13px !important;
top: -13px !important;
}
变更之后,显示效果如下:
居然OK 了,不论怎么缩小视窗,都不会把关闭按钮隐藏了,也不会出现滚动条了
综上:关闭按钮在视窗缩小后有部分隐藏,原因是关闭按钮的css 引起的,只要把关闭按钮移动到 主体位置内,显示效果就ok了
layer.js 中弹框显示不全的问题的更多相关文章
- oracle之 安装oracle指定jdk 或者如何解决提示框显示不全
在centos7下,安装oracle 11g. gnome的桌面.各个参数配置好后,运行runInstaller命令.此时弹出安装界面,在一次次点击[下一步]的时候,中间会弹出对话框,可是对话框显示不 ...
- jquery-layer弹框在火狐浏览器中弹框不显示的问题
在使用layer控件设置弹框时, 谷歌浏览器中能正常弹出, 显示在页面中央位置. 而在火狐浏览器中, 弹框只显示标题, 并且弹框内容不显示. 在火狐浏览器中弹框的效果如下图红色方框中的弹出框所示, 但 ...
- iframe中子页面通过js计算高度(使得页面不会显示不全)
使用过iframe的人,都知道,它是一个模版,里面有一个iframe,而iframe当中,是可以嵌套多个页面的.(比较常见的问题,就是iframe页面中,经常会出现内容显示不全的时候). 谨记,通过j ...
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...
- layer.js弹出框
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- layer.js,,,分享一个好用的弹出层
基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...
- loading加载和layer.js
layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2.遇 ...
- layer.js 弹窗组件API文档
基础参数 type title content skin area offset icon btn closeBtn shade shadeClose time id shift maxmin f ...
随机推荐
- dos脚本2
一.简单批处理内部命令简介 1.Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当 前回显设置. 语法 echo [{on off}] [mess ...
- 什么是Maven项目
1.通俗理解Maven:https://blog.csdn.net/shuzhe66/article/details/45009175 个人总结: Maven项目会有pom文件! 当前的项目需要依赖其 ...
- 清楚理解const_cast类型转换
1.任何使用原常量的地方, 已经直接编码到代码中去了.故后续转换类型并不能改变原定义 2.const_cast转换, 是使用了新指针或者引用,指向了原定义的内存,故而可以修改该内存. 使用也得用新指针 ...
- gridview ItemTemplate下绑定数据
<asp:TemplateField HeaderStyle-Width=" > <ItemTemplate> </ItemTemplate> </ ...
- 磁盘操作系统 cmd命令
DOS CMD :磁盘操作系统 不区分大小写 **cd \ 根目录 cls 清空屏幕 dir 显示目录 d: 进入D盘 cd 进入目录命令 dir 查看当前目录的文件与目录 del 删除文件 del ...
- switch留个爪,之后还需要再研究下
public class SwitchDemo { public static void main (String [] args) { for(int i = 0; i < 10; i++) ...
- 内网服务器设置NAT123端口映射,方便外网连接;如何测试端口连通情况。
一.nat123设置端口映射. 1)首先去nat123官网注册账号. http://www.nat123.com/ 2)下载nat123客户端 http://www.nat123.com/Pages_ ...
- 【python接口自动化-requests库】【一】requests库安装
1.概念 requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量的工作,完全满 ...
- zombodb 几点说明
内容来自官方文档,截取部分 默认es 索引的副本为0 这个参考可以通过修改索引,或者在创建的时候通过with 参数指定,或者通过pg 的配置文件中指定 索引更多的列以为这使用了更多的es 能力 索引的 ...
- 东芝 B-EV4 打印机 串口打印命令
最近在做项目时候使用了东芝的B-EV4打印机,在打印Excel时候由于字体太小,导致打印非常模糊.只能通过串口名称发送打印指令进行打印.在做项目的时候查了很多关于B-EV4打印机的资料,和打印命令.资 ...