首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery - 页面 - 阻止事件冒泡示例

需求 编写一个简单的页面的示例,功能要求如下: 一个点击按钮,点击可以弹出一个 固定出现在页面的中间位置 需要写一个背景mask,用于遮掩背景,设置透明度0.3 点击外的位置,就可以消失不见...编写点击#btn按钮,显示.pop_con 首先设置.pop_con隐藏 ? 编写#btn的click()事件 ?...好了,这里已经实现了点击显示的操作了,那么下一步要编写点击的其他部分,则隐藏。 编写点击外部,则隐藏 ?...写了点击外部$(document)就隐藏的事件发现,当点击#btn的按钮,触发了fadeIn()方法显示。...在阻止了#btn按钮的click()事件冒泡到$(document)之后,那么就可以正常显示了。 同时,点击文档的任意一个地方都是可以隐藏的。

3.3K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    微信小程序提示绑定手环实例

    图片.png 今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然...)用户第一次登陆的时候,是没有绑定手环ID的,这个时候就需要弹出提示,提示确定跳转到绑定手环id的页面,绑定成功之后,就会跳转到首页,首页显示手环的电量,手环拥有者的心率运动血压等具体的数据。...js逻辑原理很简单:以下代码仅供参考 //获取应用实例 const app = getApp() Page({ data: { }, onLoad: function () {...var that = this; app.getOpenid().then(function (res) { if (res.status == 200) { //查询数据...deviceId', res.data.deviceId);//存储deviceId if (res.data.hr == null) return; //赋值显示

    84510

    微信小程序提示绑定手环实例

    图片.png 今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然...)用户第一次登陆的时候,是没有绑定手环ID的,这个时候就需要弹出提示,提示确定跳转到绑定手环id的页面,绑定成功之后,就会跳转到首页,首页显示手环的电量,手环拥有者的心率运动血压等具体的数据。...js逻辑原理很简单:以下代码仅供参考 //获取应用实例 const app = getApp() Page({ data: { }, onLoad: function () {...var that = this; app.getOpenid().then(function (res) { if (res.status == 200) { //查询数据...deviceId', res.data.deviceId);//存储deviceId if (res.data.hr == null) return; //赋值显示

    79810

    自定义Dialog和其背景阴影显示方法

    昨天研究了一下自定义Dialog的,其实要点都是把自定义好的view用setContentView(view)的方法设置进dialog里,首先我们先看一个简单的自定义Dialog。...,好了基本工作到这里完成了,最后就是设置样式style,一般背景都是半透明的遮罩: <style name="custom_dialog_style" parent="android:Theme.Dialog...--除去背景色-- <item name="android:radius" 10dp</item </style 这样就完成了一个背景半透明的了。...,这是因为你的已经是全屏了,所以在屏幕上就没有所谓的外围了,这时候我们可以自己去监听点击事件,我们来重写一下自定义Dialog类: /** * [Description] * 只有确认button...以上这篇自定义Dialog和其背景阴影显示方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    1K20

    Android中 TeaScreenPopupWindow多类型筛选功能的实例代码

    screenPopWindow = new ScreenPopWindow(MainActivity.this, dictList); //默认单选,因为共用的一个bean,这里调用reset重置下数据...screenPopWindow = new ScreenPopWindow(MainActivity.this, dictList); //设置多选,因为共用的一个bean,这里调用reset重置下数据...默认true,#f3f3f3 setBottomView(Boolean bl, int color) 设置底部分割线是否显示,以及颜色。...item未选中时的颜色,默认#000000 setBoxSize(int size) 设置item字体大小,默认13 setSingle(boolean bl) 设置是否开启单选,默认单选 reset() 显示控件时数据重置...build() 参数设置完毕,一定要build一下 总结 以上所述是小编给大家介绍的Android中 TeaScreenPopupWindow多类型筛选功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言

    79820

    写C端,如何优雅的处理多个显示?(附带源码)

    一个小场景 ❝上面这么分析可能有同学还是不了解这个业务痛点,我们举个例子,假设首页页面有个A组件,A组件有一个A_Modal需要在打开首页显示出来,enen...很简单,我们按照平时的逻辑请求后端接口拿到数据去控制显示就行...,不太现实 ❞ 如下图: ❝这些是都要在首页上显示 ❞ ?...,通过可配置化的数据来控制显示,显然是可以的 ❞ // modalConfig.js export default { // 首页 index: { // 列表 modalList...: 优先级-杜绝一个页面可能提示展示多个弹窗的情况 frontShow: 前端控制显示的字段-默认为true backShow: 后端控制显示的字段-通过接口请求获取 发布订阅模式来管理...,但是考虑到可能分布在子组件或者孙组件等等,这时候如果都在每个组件实例类,那么他们实际是没有关联的,此时单例模式就派上用场了 ❞ const controlTypeMap = {} // 获取单例

    1.8K20

    jQuery格式化显示json数据

    复制之后,就是一个错误的数据!!!...而且copy数据时,也不会带有多余的符号。点击三角形符号,也可以方便收缩和展开!! 需求 有这样一个需求,我用django开发一个接口,需要给其他人员展示数据。...展示数据时,默认直接展开json 格式化好的数据,方便其他开发人员调用。 但是jq22.com 提供的插件,有一个textarea输入,我需要把它给去掉。...默认json格式化的数据中,key是没有带双引号的,我需要默认勾选它,因此要修改js代码。 二、修改插件代码 基于上面的2点需求,下载jq22.com 提供的插件后,解压代码。...查看json格式数据插件     <link rel="stylesheet" type="text/css" href="http://www.jq22.com/<em>jquery</em>/bootstrap

    7K30

    vue3全局组件|vue3.0自定义插件实例

    今天主要给大家分享的是Vue3.0实现轻量级手机端自定义层组件V3Popup。 image.png V3Popup 一款基于vue3.0开发的移动端自定义组件。...在开发设计之初参考借鉴了Vant3及Antdv2.0中组件化思想。 未标题-360截图20201228225915303.png 快速使用 在main.js中快速引入v3popup组件。...|props参数| v-model 是否显示 title 标题 content 内容(支持String、带标签内容、自定义插槽内容)***如果content...那么如何在vue3中实现函数调用,将实例挂载到body上呢? 在vue3中可以通过createApp或createVNode render来实现挂载函数写法。...image.png ok,基于vue3.0实现自定义手机端组件就分享到这里。希望对大家有所帮助。 8BKKa5IcQbxsVvMiyfHo8QBfzwwtGXtU.gif

    7.8K00
    领券