新手求助！如何实现点击一个模态框以外的 空白区域 来关闭这个弹出模态框

MrBin1994 2017-02-23 08:41:41


鼠标点击在模态框以外任何地方 都能关闭，点在模态框上不关闭，
是要获取鼠标的位置，判断是否在模态框上？
该给谁绑定单击事件呢,?
求助

...全文
664 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
圭宁的小小前端 2017-02-24
  • 打赏
  • 举报
 回复
楼上思路准确啦咯啦咯啦咯
斯洛文尼亚旅游 2017-02-23
  • 打赏
  • 举报
 回复
你不是弹出了个半透明的背景层，背景层和登录那个层是分开不共用一个父容器的吧？分开的背景层加click事件关闭你那个登录层和背景层就行 如果是同一个容器，通过当前点击的对象判断是否在登录层之内，在就不隐藏，否则隐藏
当作看不见 2017-02-23
  • 打赏
  • 举报
 回复
模态框 弹出时就获取焦点 使用 unfocus 事件,模态框失去焦点 ,也就是点击模态框以外的区域,就隐藏.
angularJs模态框点击空白不隐藏
这篇博客介绍了如何在AngularJS中防止模态框在点击空白区域时自动关闭。通过设置`backdrop`属性为`false`，可以实现点击背景不隐藏模态框的效果。同时，文章提供了`$modal.open`方法的详细用法，包括如何传递数据、定义控制器和模板等。
bootstrap模态框，使点击空白地方模态框不消失
本文介绍如何在Bootstrap模态框中禁用点击外部区域关闭的功能，通过添加data-backdrop=static属性，实现模态框保持打开状态，避免误操作导致的意外关闭。
模态框实现点击展开,点击空白关闭效果(React Native)
本文详细介绍了一种在React Native中实现模态框的方法，包括如何设置模态框的显示与隐藏，使用Transparent背景和none动画类型提升用户体验，以及如何通过TouchableWithoutFeedback组件关闭模态框。
Bootstrap禁止点击空白处关闭模态框以及模态框的拖动
本文介绍如何禁用Bootstrap模态框点击空白区域自动关闭的功能，并提供阻止ESC键关闭模态框的方法，同时分享如何使模态框可拖动及适配不同屏幕尺寸。
BootStrap 模态框禁用空白处点击关闭
本文介绍如何在Bootstrap模态框中禁用点击空白区域和ESC键关闭的功能，通过设置backdrop和keyboard属性实现模态框保持打开状态。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章