Popup的一个应用.

最新推荐文章于 2025-09-22 13:42:53 发布
原创 最新推荐文章于 2025-09-22 13:42:53 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#浏览器 #null #css #function #html #工作

本文介绍了用Popup Window做web菜单的好处，如带继承性、隐藏特性好、不被覆盖等。同时指出应用中存在的问题，包括内存问题、显示闪烁、样式附加、内容引用、事件处理、逻辑控制等，并给出相应解决建议，最后欢迎交流。

    好多地方已经提到了可以用Popup Window来做web上的菜单,好处有很多:
    1.Popup带继承性,就是说同级Popup只能存在一个,但可以有子Popup,孙Popup,重孙Popup....,这个跟菜单-子菜单-孙菜单,重孙菜单......很相似,哈哈,这一家子还要注意是一脉单传的,不可能有兄弟同堂的情况.
     2.Popup链中一个Popup隐藏,所有该Popup下面的窗口全部隐藏.这个特性真的让我们方便不少.
    3.它不会被别的窗体或者控件覆盖,对于以往的DIV,这个问题还真有点麻烦.
    4.点击菜单Popup之外的任意地方,Popup自动隐藏.
    5.其他暂时还没有想到,倒是在应用当中碰到了不少问题,下面列出来大家可以参考一下.
  
    问题:
   1.内存问题.这个是很重要的,基本上对一个Popup设为Null以后,在内存里是不释放的,所以如果不注意,它的内存会越用越多.最后导致浏览器无法工作.发现这个问题也是由于我比较偷懒,对于菜单的隐藏只是简单的设置为null了之.实际上,比较好的方法是这样:同级菜单只使用一个Popup,且一直保留在内存里,下级子菜单是为这个Popup创建子Popup.同级菜单要切换,只是简单的更换窗口的内容(HTML)而已.比如,一个菜单总共4层,那就创建4逐步继承的窗口,而不是在于它里面总共有多少菜单,为每个菜单创建一个窗口.
    2.对于Popup显示的问题,尽量不要用先show(0,0,1,1,obj),然后hide(),最后在show(实际尺寸),因为这样会导致菜单会闪.看着晃眼.最好事先把定位和尺寸算准了再show.
    3.如果你打算用外联CSS样式表的话,Popup需要用oNewChildWin.document.createStyleSheet('Menu.css')来动态的附加CSS样式表.当然,如果在代码里面加也一样.
    4.对于任何一个Popup里面内容的引用,需要加入Popup的名字作为引用对象.浏览器的原有窗口需要加“window“前缀.  
    5.对于离开有下级菜单的菜单项的时候,尽量不要用onmouseout来隐藏该菜单项的子菜单,而是用进入到别的菜单项的onmouseover的事件来隐藏子菜单,如果用onmouseout来隐藏该菜单项的子菜单,逻辑控制会变复杂.
    6.我在使用Popup对象的时候没有取到event对象,可能它本身不提供.所以我们没法用event.srcElement来取得事件的触发对象.所以尽量用参数来传递对象.如果你要attchEvent的时候在函数里面传递参数,可以这么写:
       obj.attachEvent(“onmouseover“,function(){
             fnTrueFunction(obj); 
       });
    7.菜单隐藏显示的逻辑是比较麻烦的事情,做之前还是要写一个流程.

    Popup做菜单我想到的是这些,欢迎大家跟我交流. 
   祝大家使用Popup愉快.
     

KimYoo
关注
Popup Youtube Android Ios.rar
11-14
本篇将聚焦于一个具体的应用场景——在Android和iOS平台上实现Popup YouTube功能，以期为Unity开发者提供深入的实践指导和技巧分享。 首先，Popup YouTube是指在不离开当前应用的情况下，通过悬浮窗口播放YouTube...
百度 popup 完美修正版.zip
11-20
【标题】"百度 popup 完美修正版.zip" 暗示了这是一个针对百度平台的弹窗（popup）功能进行优化和修复的软件版本。在IT领域，popup通常指的是网页或者应用中出现的突然窗口，它可能是通知、广告或者用户交互的一部分...
popup
defending的博客
10-23 267
P1 Title p1页面 上海 北京 function implement() { } function popupFunc() { window.
精美多样的弹出框样式设计与实战应用
weixin_28895791的博客
09-22 835
打开弹窗
Popup.js（有用例及注释）
09-01
Popup.js 是一个很不错的javaScript 弹出窗口js库。 可修改，可括展性好。 Web编程必备的好工具啊。 下载后解压，打开Demo.html即可以看到效果了。 希望对大家有帮助！！
浅论popup
SML的专栏
07-20 1665
1.需求：采用模式子窗体，从主页面打开popup页面，在popup页面的列表里选择code和name传递回主页面。由于主页面以后会有很多项目需要从此popup页面选择值，因此需要在打开popup页面的时候告诉他主页面的哪个项目需要他的返回值。在主页面上，code是text，name是lable。2.关键问题：showModalDialog（a,b,c）是js打开模式子窗体的命令，其中a是子窗体
popup_element.js:小js对象创建模式弹出窗口
05-02
在JavaScript编程中，"popup_element.js:小js对象创建模式弹出窗口" 主要涉及到的是使用JavaScript对象创建模式来设计和实现一个弹出窗口的功能。这个弹出窗口可能用于显示通知、用户交互或者提供额外的信息。...
基于C#WinForm的Popup窗口提醒源码.zip
最新发布
11-04
在实践中，Popup提醒通常用于以下几种情况：当用户进行特定操作时，系统自动弹出一个提醒窗口告知用户操作结果或状态；在后台任务完成或重要事件发生时，通过Popup窗口通知用户；以及在用户界面需要引起用户注意的...
精选资源
Popup And Insert SubPanal.zip
07-29
在LabVIEW编程环境中，"Popup And Insert SubPanel.zip" 是一个包含了一系列用于动态创建和管理子面板（SubPanel）的示例项目。这个压缩包主要关注如何在运行时通过编程方式打开子面板，并以弹出窗口或嵌入到现有VI...
很好用的Popup.js
08-11
我找了很久才找到的，一个很好用的百度窗体js。方便使用
Popup学习笔记
zdx19880830的专栏
07-08 701
popup学习笔记
Leaflet学习文档-Popup(弹窗框）和Tooltip（提示框）学习
xiuyu_lj的博客
03-01 2594
Leaflet-Popup和Tooltip信息
怎样实现POPUp
gengwei80的专栏
09-02 1303
var popup1 = window.createPopup();var window2 = popup1.document.parentWindow;var popup2 = window2.createPopup();function zdzhuo() {var pop1Body = popup1.document.body;pop1Body.style.backgroundColor =
【HarmonyOS NEXT】popup弹窗
weixin_71403100的博客
09-18 2405
箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。1.当为boolean类型时，如果设置为false，则不响应点击、左滑/右滑、三键back或键盘ESC退出事件，仅当设置“弹窗显示状态”参数show值为false时才退出；2.显示动效中按back键，打断显示动效，执行退出动效，动画效果为显示动效与退出动效的曲线叠加后的效果。3.退出动效中按back键，不会打断退出动效，退出动效继续执行，back键不被响应。
最实用最全悬浮Popup 拖动、跟随窗口移动、居中弹出、实时尺寸比例调整、不折叠关闭、截断显示、输入焦点
qq_20758141的博客
06-20 4402
Popup悬浮窗 拖动 跟随窗口移动 居中 实时 比例调整 文本输入框获取焦点
原生JS编写popup
憧憬美好生活的boy
03-10 806
适用于微信公众号等各种手机页面端js脚本(function (window) { var sohanPopup = function(data){ //+body+ var body = document.getElementsByTagName('body')[0]; body.style.position = 'relative';
浅谈WPF之Popup弹出层
绳锯木断，水滴石穿，专心写文，无问西东！！！
01-10 5682
默认情况下，当IsOpen属性为true时，将一直处于打开状态，直到属性变为false。在日常开发中，当点击某控件时，经常看到一些弹出框，停靠在某些页面元素的附近，但这些又不是真正的窗口，而是页面的一部分，那这种功能是如何实现的呢？Popup（弹出层），Popup 控件提供一种在单独窗口中显示内容的方法，该窗口相对于指定元素或屏幕坐标在当前应用程序窗口上浮动。当ToggleButton取消选中时，隐藏弹出层。Popup控件，默认支持淡入，滑入等动画效果，，仅供学习分享使用，如有不足之处，还请指正。
class PopupTextDelegate(QItemDelegate): def __init__(self, parent=None): super().__init__(parent) self.popup = None def editorEvent(self, event, model, option, index): if event.type() == QMouseEvent.MouseButtonPress: text = index.data(Qt.DisplayRole) rect = option.rect # 创建弹窗 self.popup = QTextEdit() self.popup.setWindowFlags(Qt.Popup) self.popup.setReadOnly(True) self.popup.setPlainText(text) self.popup.setGeometry(rect.x(), rect.bottom(), rect.width(), 100) self.popup.show() # 点击外部关闭 def close_popup(evt): if not self.popup.rect().contains(evt.pos()): self.popup.close() self.popup = None self.popup.mousePressEvent = close_popup return True return super().editorEvent(event, model, option, index)点击别的地方时未正常关闭
07-19
这是一个非常常见的问题：**在 PyQt 中，当弹窗 (`QTextEdit`) 显示为 `Qt.Popup` 类型时，点击外部区域无法正常触发关闭逻辑**。这是因为 `mousePressEvent` 是在弹窗内部处理的，而外部区域的点击事件不会被弹窗捕获。 --- ## ✅ 问题原因 在你当前的代码中： ```python self.popup.mousePressEvent = close_popup ``` 这行代码只是重写了 `QTextEdit` 的 `mousePressEvent`，**只有在弹窗内部点击时才会触发**。当你点击弹窗外部区域时，事件由其他控件处理，而弹窗不会收到这个事件，所以不会触发 `close_popup()`。 --- ## ✅ 解决方案：使用 `QApplication.focusChanged` 或 `QEvent.ApplicationDeactivate` 要解决这个问题，你可以使用以下两种方式之一来监听外部点击事件： --- ### ✅ 方法一：使用 `QApplication.focusChanged` 信号（推荐） 当焦点离开弹窗时，说明用户点击了别的地方。 ```python from PyQt5.QtWidgets import QTextEdit, QItemDelegate, QApplication from PyQt5.QtCore import Qt, QMouseEvent class PopupTextDelegate(QItemDelegate): def __init__(self, parent=None): super().__init__(parent) self.popup = None def editorEvent(self, event, model, option, index): if event.type() == QMouseEvent.MouseButtonPress: text = index.data(Qt.DisplayRole) rect = option.rect self.popup = QTextEdit() self.popup.setWindowFlags(Qt.Popup) self.popup.setReadOnly(True) self.popup.setPlainText(text) self.popup.setGeometry(rect.x(), rect.bottom(), rect.width(), 100) self.popup.show() # 使用 focusChanged 信号检测外部点击 def on_focus_changed(old, new): if self.popup and (new is None or not self.popup.geometry().contains(QApplication.desktop().cursor().pos())): self.popup.close() self.popup = None QApplication.instance().focusChanged.connect(on_focus_changed) # 保存连接以便后续清理（防止多次连接） self.popup.focusChanged = lambda old, new: on_focus_changed(old, new) return True return super().editorEvent(event, model, option, index) ``` --- ### ✅ 方法二：使用 `QEvent.ApplicationDeactivate`（适用于窗口失去焦点） 当整个应用程序失去焦点时关闭弹窗： ```python from PyQt5.QtCore import QEvent class PopupTextDelegate(QItemDelegate): def __init__(self, parent=None): super().__init__(parent) self.popup = None def editorEvent(self, event, model, option, index): if event.type() == QMouseEvent.MouseButtonPress: text = index.data(Qt.DisplayRole) rect = option.rect self.popup = QTextEdit() self.popup.setWindowFlags(Qt.Popup) self.popup.setReadOnly(True) self.popup.setPlainText(text) self.popup.setGeometry(rect.x(), rect.bottom(), rect.width(), 100) self.popup.show() def close_popup(): if self.popup: self.popup.close() self.popup = None # 当应用失去焦点时关闭弹窗 QApplication.instance().installEventFilter(self) self.popup.close_popup = close_popup # 保存引用 return True return super().editorEvent(event, model, option, index) def eventFilter(self, obj, event): if event.type() == QEvent.ApplicationDeactivate and self.popup: self.popup.close() self.popup = None return True return super().eventFilter(obj, event) ``` --- ## ✅ 补充建议 - **避免多次绑定信号**：每次点击都绑定 `focusChanged` 会导致重复连接，建议在类中保存引用并只绑定一次。 - **弹窗复用**：频繁创建 `QTextEdit` 会影响性能，可以考虑复用弹窗。 - **使用 QDialog + QLabel**：如果你只是展示文本，使用 `QDialog` + `QLabel` + `QScrollArea` 更轻量。 --- ## ✅ 示例优化：使用 `QLabel` + `QDialog` 实现弹窗 ```python from PyQt5.QtWidgets import QDialog, QLabel, QScrollArea, QVBoxLayout from PyQt5.QtCore import Qt class TextPopup(QDialog): def __init__(self, text, parent=None): super().__init__(parent, Qt.Popup) self.setModal(False) self.resize(300, 150) label = QLabel(text) label.setWordWrap(True) label.setTextInteractionFlags(Qt.TextSelectableByMouse) scroll = QScrollArea() scroll.setWidget(label) scroll.setWidgetResizable(True) layout = QVBoxLayout() layout.addWidget(scroll) self.setLayout(layout) def mousePressEvent(self, event): if not self.rect().contains(event.pos()): self.close() ``` 然后在 `editorEvent` 中使用： ```python self.popup = TextPopup(text) self.popup.show() ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值