How to deal with the problem that part of the pop-up window still 'remains on the page' after closing it in iOS?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to deal with the problem that part of the pop-up window still 'remains on the page' after closing it in iOS?

零下一度

Jun 24, 2017 am 10:54 AM

positionweb

As shown above, .fb-box is a large div that contains all elements on the page, including the pop-up window .dialog-img you see, and the height is set: 100%;-webkit-overflow-scrolling:touch;

But with this setting, there will be a bug on ios.After the page scrolls a certain distance, click If the pop-up window is displayed and then closed, you will find that part of the pop-up window is still "remaining on the page". Positioning is required, -webkit-overflow-scrolling:touch; is also required.

Solution

Lay out the div and .fb-box of the pop-up window as sibling nodes, and wrap it with another div in the outer layer, this Even if you get up from the pit

The above is the detailed content of How to deal with the problem that part of the pop-up window still 'remains on the page' after closing it in iOS?. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

H5中position属性的灵活运用技巧Dec 27, 2023 pm 01:05 PM

H5中如何灵活运用position属性在H5开发中，经常会涉及到元素的定位和布局问题。这时候，CSS的position属性就会发挥作用。position属性可以控制元素在页面中的定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘附定位（sticky）。本文将详细介绍在H5开发中如何灵活运用position属性

html怎样把div放在底部Mar 02, 2021 pm 05:44 PM

html把div放在底部的方法：1、使用position属性将div标签相对于浏览器窗口进行定位，语法“div{position:fixed;}”；2、设置到底部距离为0来把div永远放置于页面底部，语法“div{bottom:0;}”。

h5如何使用positionDec 26, 2023 pm 01:39 PM

在H5中使用position属性可以通过CSS来控制元素的定位方式：1、相对定位relative，语法为“style="position: relative;”；2、绝对定位absolute，语法为“style="position: absolute;”；3、固定定位fixed，语法为“style="position: fixed;”等等。

CSS 布局属性优化技巧：position sticky 和 flexboxOct 20, 2023 pm 03:15 PM

CSS布局属性优化技巧：positionsticky和flexbox在网页开发中，布局是一个非常重要的方面。良好的布局结构可以提高用户体验，使页面更加美观和易于导航。而CSS布局属性则是实现这一目标的关键。在本文中，我将介绍两种常用的CSS布局属性优化技巧：positionsticky和flexbox，并提供具体的代码示例。一、positions

web前端打包工具有哪些Aug 23, 2022 pm 05:31 PM

web前端打包工具有：1、Webpack，是一个模块化管理工具和打包工具可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序；2、Grunt，一个前端打包构建工具；3、Gulp，用代码方式来写打包脚本；4、Rollup，ES6模块化打包工具；5、Parcel，一款速度极快、零配置的web应用程序打包器；6、equireJS，是一个JS文件和模块加载器。

深入探讨“高并发大流量”访问的解决思路和方案May 11, 2022 pm 02:18 PM

怎么解决高并发大流量问题？下面本篇文章就来给大家分享下高并发大流量web解决思路及方案，希望对大家有所帮助！

position有哪些属性Oct 10, 2023 am 11:18 AM

position属性取值有static、relative、absolute、fixed和sticky等。详细介绍：1、static是position属性的默认值，表示元素按照正常的文档流进行布局，不进行特殊的定位，元素的位置由其在HTML文档中的先后顺序决定，无法通过top、right、bottom和left属性进行调整；2、relative是相对定位等等。

web是前端还是后端Aug 24, 2022 pm 04:10 PM

web有前端，也有后端。web前端也被称为“客户端”，是关于用户可以看到和体验的网站的视觉方面，即用户所看到的一切Web浏览器展示的内容，涉及用户可以看到，触摸和体验的一切。web后端也称为“服务器端”，是用户在浏览器中无法查看和交互的所有内容，web后端负责存储和组织数据，并确保web前端的所有内容都能正常工作。web后端与前端通信，发送和接收信息以显示为网页。

See all articles