点击空白处消失弹窗

本文介绍了一种使用jQuery简化点击事件处理的方法,通过监听文档的mouseup事件,判断点击是否发生在指定区域外部,从而实现对特定区域外点击的响应,如隐藏层等。此方法适用于单页面应用中对点击事件的精确控制。

以前做这个功能,都是多谢一个div用fixed定位,opacity设置为0,这样做其实后面其他点击操作,尤其单页面不好做,后来看到有这个方法,觉得还不错,分享给大家

$(document).mouseup(function (e) {
		var _con = $('.minipro_box'); // 获取目标区域
		if (!_con.is(e.target) && _con.has(e.target).length === 0) {
            // 判断点击事件发生在区域外的条件是

            // 1.点击事件的对象不是目标区域本身

            // 2.点击事件的对象不是目标区域的子元素

            // 满足以上两个条件 就这个在这个区域里写 功能代码 例如
			$('.layer').hide()
		}
	})

(侵联删)

### Element Plus Dialog 点击外部区域自动关闭配置 为了实现Element Plus的Dialog组件在点击空白处关闭对话框的功能,可以通过调整`close-on-click-modal`属性来控制这一行为。默认情况下,此属性为`true`,意味着点击模态背景时会触发关闭事件[^4]。 如果希望保持原有特性即允许通过点击弹窗部分使弹窗消失,则无需特别更改任何设置因为这已经是框架预设的行为模式[^1]。然而,对于那些想要确保仅能通过特定交互(如按钮)来关闭对话框的应用场景来说,应该将上述提到的布尔型参数置为相反值——即将其设定成`false`从而禁用该机制。 另外一种方式是在应用初始化阶段对Element Plus进行全局配置,以此达到统一管理的目的。具体做法是在引入Element Plus库之后,在挂载Vue实例之前定义好所需选项并传递给插件注册函数作为第二个参数对象的一部分: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; const app = createApp(App); // 对话框点击遮罩层时不关闭 app.use(ElementPlus, { size: 'default', // 可选,默认大小样式 }); // 修改ElDialog默认props app.config.globalProperties.$ELEMENT.dialog.closeOnClickModal = true; ``` 值得注意的是,在某些版本中可能需要直接访问内部API来进行更深入定制化处理,例如修改`app._context.components.ElDialog.props.closeOnClickModal.default`这样的路径下的默认值[^5]。不过这种方法依赖于具体的实现细节,并不是官方推荐的做法,因此建议优先考虑前两种更为稳定可靠的方法。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值