关于在有限的宽度和高度下Jquery中的Dialog显示发生错位的问题

最新推荐文章于 2023-06-29 19:52:20 发布
原创 最新推荐文章于 2023-06-29 19:52:20 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了在使用jQueryDialog组件时遇到的问题：在有限的宽度和高度下，首次点击标题能正常显示，但后续点击会隐藏内容。通过深入分析发现，是由于top偏移导致的。文章最终提供了有效的解决方案，即在打开和关闭Dialog前设置其top位置，确保交互体验不受影响。

在使用Jquery Dialog时，在有限宽度和高度的情况下，第一次点击是可以正常显示标题的，如图1.后续再次点击标题或者更多内容就被隐藏不再显示，如图2.

图1图2


通过跟踪，发现是后续再点击时，top发生了偏移。原本是打算通过class定位到div去调整top值，但始终没有效果。最终发现如下修改可用。即，在关闭和打开Dialog之前，就设置好它的top值。如下：



SAPUI5 1.20.0 升级实战：jQuery 1.10.2 与 jQuery UI 1.10.4 的兼容性要点、踩坑场景与修复方案
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
12-17 19
SAPUI5升级中jQuery行为变化的影响及应对 升级SAPUI5到1.20.0版本时，底层jQuery和jQuery UI会同步升级，导致以下关键变化： .height()/.width()方法对box-sizing的处理更严格，可能影响布局计算 jQuery.data('events')被移除，事件调试方式需要调整 QUnit测试中tabindex比较需要注意类型差异 font-weight值被归一化，影响样式断言 推荐使用jQuery.sap.Version()判断当前jQuery版本 应对建议：
SAP UI5 Diagnostics 中的 Technical Information：从可见元数据到可操作的排障利器
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
09-22 148
本文深入解析SAP UI5的Technical Information工具，揭示其作为诊断中枢的关键作用。该工具提供jQuery版本、引导配置、库版本矩阵等核心信息，帮助开发者快速定位兼容性问题、性能瓶颈和模块加载异常。文章详细介绍了六个关键信息区域的功能，并重点讲解了Use Debug Sources和E2E Trace两大调试功能的使用场景。通过四个实战范式（特性不可用、首屏变慢等），展示了如何将技术信息转化为具体行动方案。这些方法遵循"观察→判断→行动→验证"的流程，帮助开发团队高
jquery弹出div定位混乱问题
极尽海
04-23 524
事先声明，此问题已经困扰了我近半年，我一直没搞明白jquery的弹出窗口在ie6里面为什么会错位，关闭按钮跑到了屏幕最上方，图片跑到了屏幕最下方。我深信jquery的程序是不会错的，他们一直声明能兼容任何浏览器，于是在这个周的周二晚上，我鬼使神差的把css里面的position相对定位给去了，刷新首页点击效果后，。。。。泪奔了，这尼玛就是坑爹的啊，肯定是ie6把jquery的定位给忽略掉了。所以如
jquery dialog width 有一个bug
weixin_30675967的博客
02-12 132
jquery dialog width 有一个bug; 把 jquery.dialog 里的 _size 里的 elements 的width 的auto 变为 100% 这样的宽度就不会有那个添不满内容框的情况了 转载于:https://www.cnblogs.com/liulf/archive/2012/02/12/2348000.html...
jquery获取当前窗口位置，当前页面滚动距离，当前元素绝对位置，如果页面滚动到某位置
chen649053473的博客
01-28 6364
// 滚动条的垂直位置。 var windowScrollTop = $(window).scrollTop(); // 窗口大小高度 var documentHeight = $(document).height();   // 元素位置 var childModuleHeight = $('.childModule').offset().top; offset() 包含 ：top ...
jqueryui autocomplete在对话框上显示不全的问题解决办法
dqb4531的博客
11-26 672
问题现状如下： 我查了很多地方说是要设置.ui-autocomplete <style> .ui-autocomplete{ z-index: 11111; } </style> 以上的说法是因为ui-dialog的遮罩层的级别太高从而遮挡了，我试过了，完全不好用。 因为ui-autocomplete这个元素是在ui-dialog内，应该是继承了dialog的z-index，并且我把遮罩层的div删掉也仍然是显示不了的。 其实主要原因是这个di...
IE11被识别为较低版本，页面错位问题
左直拳的马桶_日用桶
05-05 4485
IE11有时会被识别为较低的IE版本。现在做的页面，在IE下浏览的话，通常都要求IE11。否则的话，打开会有好多兼容性问题，页面错位得像坨屎。但是，已经明明是IE11了，打开也错位得像坨屎。通常，这都是兼容性视图设置问题。在IE浏览器上，菜单栏 工具 - 兼容性视图设置，将对应的网址剔除即可。可是，已经明明兼容性视图设置名单上没有本站点，打开也错位得像坨屎！（IE，你还能更烂一点吗？）javascr
jQuery Mobile多种提示框效果实现与应用
在实际开发中，用户交互是提升应用可用性和用户体验的关键环节之一，而“提示框”（msgbox）作为最常见且重要的用户反馈机制，在 jQuery Mobile 中扮演着不可或缺的角色。本文将围绕标题“jQuery Mobile 多种提示框...
基于jQuery实现的弹出窗口功能详解
同时，响应式设计也需被考虑，确保弹窗在不同设备屏幕尺寸下都能正常显示，避免出现溢出或错位问题。 从技术扩展角度来看，虽然现代前端框架（如Vue、React）逐渐取代了传统jQuery的主导地位，但在许多遗留项目或...
前端面试汇总-React
分享前端工程化、动效魔法与性能之舞！
06-29 1701
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
android 小米手机弹出框（自定义dialog）位置不居中解决方法
商清艾专栏
07-31 6971
在创建dialog或者构造方法出加入如下代码就可以解决问题、 Window window = dialog.getWindow(); if (dialog != null && window != null) { WindowManager.LayoutParams attr = window.getAttributes();
Dialog出现页面布局错乱解决方法
qq1036866288的博客
07-18 2443
WindowManager windowManager = getWindow().getWindowManager(); Display display = windowManager.getDefaultDisplay(); WindowManager.LayoutParams lp = getWindow().getAttributes(); lp.width = (int
jquery dialog 参数使用
xiaomin1991222的专栏
10-12 380
Jquery ui的dialog使用文档概述 一个浮动的窗口，包含标题和内容两部分。可以移动，调整大小，以及关闭图标'×'。如果内容长度超过了对话框内容区域的显示，则会自动出现滚动条。除此之外，还有一些常用的选项，如：添加底部按钮栏、模式窗口屏蔽层等。 ·参数（名称 : 参数类型 : 默认值） autoOpen : Boolean : true 如果设置为true，则默认页面加...
dialog 设置宽高尺寸无效
yan072201的专栏
12-19 3156
在show()方法后执行window的setLayout()方法，如下： dialog.show(); //兼容部分手机尺寸无法设置问题 dialog.getWindow().setLayout(150, 60); fitsSystemWindows 属性不能设置成true，否则padding无效;并且按照以上方法会出现尺寸变了，但是dialog内容不显示了 Android 4.4及一下fi...
jquery easyui1.3.5使用window或dialog窗体时显示错位
weixin_34194359的博客
05-03 240
新版本的easyUI里面，当我们使用到了window和dialog等窗体时，并且在不同浏览器上效果不同，即兼容性问题。Firefox浏览器上有个样式错乱：遮罩层跟窗体错位，而且窗体跑在上面看不到。这个我不知是不是新版本是否存在bug问题，我也是菜鸟一枚。 当出现这个问题的时候，只要在body里面指定宽高都为100%，即可解决这个问题。 转载于...
自定义dialog的宽度充满整个屏幕宽度的问题
热门推荐
crystalddd的专栏
03-26 1万+
最近在实现一个自定义dialog的时候，效果要求自定义dialog的宽度必须跟手机屏幕的宽度一样宽。自定义dialog：public class CustomDialog extends Dialog{ private Context mContext; public CustomDialog(Context context) { super(context);
Jquery UI dialog 弹层被遮住的问题
lijunlinlijunlin的专栏
02-17 3240
我有一个页面，只有一个iframe，这个iframe里面放的是flash，如下图 弹层后，如下图 怎么让弹出的层在最上边，我用的是Jquery UI 中的dialog来弹层的 .ui-dialog{position:absolute;top:0;left:0;padding:.2em;outline:0; z-index: 1000 !important; }在css文件
为什么在xml文件中设置dialog的宽度和高度不生效?
07-15
在 XML 文件中设置 dialog 的宽度和高度可能不生效的原因有很多，以下是一些可能的原因和解决方法： 1. 使用了错误的属性或属性值：确保在 XML 文件中使用正确的属性和属性值来设置 dialog 的宽度和高度。常见的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值