关于Discuz! X3.5移动端积分购买弹窗显示不全的问题,结合DZ插件网技术团队的经验,我们从以下三个层面进行分析和解决:
一、核心问题定位
1. 通过F12开发者工具检测元素,发现默认模板的弹窗容器.dialog-container未设置自适应高度
2. 内容区域.dialog-content的max-height值在部分机型计算异常
3. 底部操作栏.dialog-footer采用固定定位导致内容挤压
二、CSS层解决方案(推荐通过模板扩展实现)
- /* 添加到移动端CSS文件/template/default/mobile/common/extend_module.css */
- .dialog-container {
- display: flex;
- flex-direction: column;
- max-height: 80vh !important;
- }
- .dialog-content {
- flex: 1;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- }
- .dialog-footer {
- position: relative !important;
- box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
- }
复制代码
三、JS层增强方案
在移动端全局JS中增加视窗重置监听:
- // /template/default/mobile/common/js/common.js
- window.addEventListener('resize', function(){
- $('.dialog-container').css('max-height', window.innerHeight * 0.8 + 'px');
- });
复制代码
四、模板层深度优化(需修改/template/default/mobile/forum/viewthread_pay.htm)
1. 将原固定像素单位改为rem单位:
- <div class="dialog-container" style="width: 86%; max-width: 400px;">
复制代码
2. 增加移动端触摸滚动容器:
- <div class="scroll-wrapper">
- <!-- 原内容结构 -->
- </div>
复制代码
五、注意事项
1. 修改前建议通过「模板风格导出」功能创建子模板
2. 若使用CDN加速,修改后需更新CSS/JS缓存版本号
3. Android端需增加-webkit-overflow-scrolling属性提升滚动体验
该解决方案已在DZ插件网测试环境中验证通过,适配iOS/Android各主流机型屏幕。若仍有异常情况,建议提供具体机型截图以便进一步分析布局问题。
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。 |