点击之后显示弹框,关闭后显示

2024-11-01

关于点击弹框外部区域弹框关闭的交互处理（前端JS）

常见需求场景前端在处理交互的时候,经常遇到这样的场景,点击一个按钮,出现一个弹框,点击外部区域,弹框关闭. 解决方法思路说明: 1.给弹框的div父级都加个类名,如: 2.在document绑定一个点击事件,获取当前点击元素的类名,开始向上找,找它的父级类名, 2.1. 包含我们加的几个类名,则表示点击的是当前框,不处理: 2.2. 不包含我们加的几个类名,则是外部区域,关闭当前显示框: 代码实现 // 添加点击事件 document.addEventListener('click', e

js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一:这个问题通常的办法是使用阻止事件冒泡来实现,代码如下(省略css): <body> <button id="btn1" onclick="alertBoxFn();stopBubble()">打开弹窗</button> <di

angularJs $mdDialog和$uibModal弹框关闭传值

$mdDialog以一个点击button按钮出现弹框为例: $scope.btn=function($event,row){ var dScope = $scope.$new(true); dScope.row = row;//从新new一个$scope,把当前值带到弹框中,页面可直接绑定收据,js用前加$scope $mdDialog.show({ scope:dScope, parent:angular.element(document.body), targetEvent: $event,

controller分支实现前台显示弹框同时转发

controller分支实现前台显示弹框,前台不需要进行什么操作, 前台请求后台的分支即可. controller层(标红的地方是(alert('账号或密码错误!请重新输入!!!!') window.location.href='/index.jsp'):弹出一个弹框,然后跳转一个页面,如果你只想弹个弹框可以把跳转的页面去掉.): @RequestMapping("/isLogin") public Object isLogin(HttpServletRequest r

iOS：类似于网易云音乐的刷新条目显示弹框

一.介绍在app中使用刷新控件或者第三方刷新库是最常见的功能,在请求服务器时,获取数据的过程是处于不可见状态的,那么通过这个刷新状态可以给用户以直观的感受,这是增强用户体验的一个相当好的方法.我个人认为,有时这个方法仍有不足,就是当拉取到数据时,用户只是知道数据有了,并没有直接告知用户拉取了或者刷新了多少条数据.所以,这里我写了一个类似于网易云音乐的“朋友”模块中的一个刷新条目显示弹框. 二.思想 1.创建一个messageView,内部包含一个label,使用masonry约束,将其放到na

记一次layui弹框关闭问题

我在博客园记录过layui关于弹框关闭问题,文章为layui关闭弹出层,这次出现了特殊情况,之前是通过layer.closeAll()解决了这个问题,但是这次解决不了.而换成parent.layer.closeAll()问题就迎刃而解.

vue中点击空白处隐藏弹框（用指令优雅地实现）

在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 显示 </div> </div> </template> <script> cons

PL/SQL Developer的错误提示弹框的文本显示乱码问题

问题:Windows中文环境下,PL/SQL Developer的错误提示弹框文本为乱码,如下: 解决过程:1.使用SELECT * FROM v$nls_parameters;查询得知服务器的字符集编码为: NLS_LANGUAGE=SIMPLIFIED CHINESE NLS_CHARACTERSET=AL32UTF8 2.修改环境变量,在计算机-右键属性-高级系统设置-环境变量中,新建一个用户变量为“NLS_LANG=SIMPLIFIED CHINESE_CHINA.AL32UTF8”(与

FineUI分组显示弹框最新的在最上边

function TOBTCorrFun(obj){ var msgContent = JSON.parse(obj.dataJson); var tJson = JSON.stringify(obj).replace(/"/g, "'").replace(/ /g, '#'); showNotifyGroup({ title: '来自' + obj.FromName + '的TOBT请求!!!', message: '航班号:' + msgContent.cals

winfrom 点击按钮button弹框显示颜色集

1.窗体托一个按钮button: 2.单击事件: private void btnForeColor_Click(object sender, EventArgs e) { using (ColorDialog cdialog = new ColorDialog()) { cdialog.AnyColor = true; if (cdialog.ShowDialog() == DialogResult.OK) { this.ForeColor = cdialog.Color; this.btnF

bootstrap模态框关闭后清除模态框的数据

https://segmentfault.com/q/1010000008789123 bootstrap模态框第二次打开时如何清除之前的数据? 我用了bootstrap模态框的remote功能,在弹出模态框时动态加载界面,但是当打开过一个模态框后,打开其他的模态框,数据不会刷新,还是保留原来的. 如图所示用这个方法也不行请问该怎么做才能清空之前的数据解答: 1. 初始化输入框不行么?$(this).removeData('bs.modal')换成$('input').value('');

Elementui【tooltip】在弹框关闭之后再次‘出现’的问题

如图,第一次弹窗进来的时候,符合条件之后,这个提示文字的位置是对的,而且正常显示: 现在点击取消按钮,第二次进入弹窗,如图,提示文字就跑到了左上角,而且输入符合条件的数值之后,会另外显示一个tooltip,这个提示会显示在正确的位置. 好了,问题出现,就解决问题,看文档是有个 disable 属性的,表示该tooltip是否可用 ,那么就利用这个属性去控制tooltip的显示和隐藏,控制是否可用代码: <template v-if="lossRate(dataForm.list, ite

element 弹框关闭报错

<template> <el-container style="padding: 00px 20px 0px 20px"> <el-dialog title="售电公司注册审批记录" :visible.sync="innerVisible" width="60%" @close="closeDialog" :close-on-click-modal="true&quo

WinForm 弹框确认后执行

if (MessageBox.Show("你确定要退出程序吗?", "确认", MessageBoxButtons.OKCancel, MessageBoxIcon.Question, MessageBoxDefaultButton.Button2) == DialogResult.OK) { //... }

Ubuntu下搜狗输入法只显示黑框，不显示输入的汉字选项

1. cd ~/.config 2.删除三个文件夹: SogouPY, SogouPY.users, sogou-qimpanel 然后重启输入法

wxpython 简单例子：显示文本框的窗口显示鼠标位置

简单例子来自教程: #!/bin/env python import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self, None, -1, "My Frame", size=(300, 300)) panel = wx.Panel(self, -1) panel.Bind(wx.EVT_MOTION, self.OnMove) wx.StaticText(panel, -1, "Po

简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)

弹出弹框效果展示实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.box,因为要在整个窗口显示固定,所以position要设为fixed,background设为灰色半透明,由于要遮住整个显示屏,width和height都设为100%(body和html的width和height也都设为100%); 在遮罩层的div.box里写弹框的div.container,位置相对于父级

移动端ios升级到11及以上时，手机弹框输入光标出现错位问题

引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一一开始上网找解决方案,找到如下处理方式.但存在当页面出现滚动条时,弹框弹出后,页面回滚至顶部.在不改变原有弹框代码的情况下,有效地解决光标错位问题,但严重影响用户使用,只能忍痛舍去~ //弹框弹出后执行如下代码 $('body').css({'position': 'fixed', 'width': '100%'}); //弹框关闭后执行如下

vue封装公用弹出框方法，实现点击出现操作弹出框

vue封装公用弹出框方法,实现点击出现操作弹出框如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里插入任何元素,这个弹框显示时根据我鼠标的点击位置,定位弹窗的位置,并在组件里面监听鼠标抬起事件,触发事件时将弹窗隐藏: 接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中: 本次实现基于vuecli3

jquery-layer弹框在火狐浏览器中弹框不显示的问题

在使用layer控件设置弹框时, 谷歌浏览器中能正常弹出, 显示在页面中央位置. 而在火狐浏览器中, 弹框只显示标题, 并且弹框内容不显示. 在火狐浏览器中弹框的效果如下图红色方框中的弹出框所示, 但是, 在火狐浏览器中, 则出现了弹框位置跳出界面, 并且内容不显示的情况: 进入debug界面, 会发现, 无论是修改layer弹出层位置(offset), 还是设置layer弹出层的宽高(area), 都不能完美的解决问题. 而导致弹出内容不显示的根本原因则是弹出框div的上一级div的layui

点击之后显示弹框,关闭后显示

热门专题