angular4自定义模态弹框
来源:互联网 发布:linux服务器份额 编辑:程序博客网 时间:2024/05/22 06:09
代码记录,便于下次不会:
模板:
<div class="alerting"> <!--//弹框内容--> <div class="alertContent" ontouchmove="event.preventDefault();event.stopPropagation();"> <label>内容</label> </div> <!--遮罩--> <div class="backdrop-div" (click)="backdropclick($event)" ontouchmove="event.preventDefault();event.stopPropagation();"> <ion-backdrop class="drop" role="presentation" tappable style="opacity: 0.5; transition-delay: initial; transition-property: none;"></ion-backdrop> </div></div>
ts.组件函数
//遮挡层点击事件 backdropclick(e){ //判断点击的是否为遮罩层,是的话隐藏遮罩层 if(e.srcElement.className != 'itemClass'){ this.isShow = false; } //隐藏滚动条 this.hiddenscroll(); e.stopPropagation(); } //弹出下拉框时,取消scroll hiddenscroll(){ //获取当前组件的ID let aboutContent = document.querySelector("#aboutContent"); //获取当前组件下的scroll-content元素 let scroll:any = aboutContent.querySelector(".scroll-content"); if(this.isShow){ scroll.style.overflow='hidden'; }else { scroll.style.overflow=''; } }
阅读全文
0 0
- angular4自定义模态弹框
- Angular4
- Angular4
- Angular4 引用 material dialog时自定义对话框
- angular4自定义根据日期判断星期的管道
- angular4+笔记
- Angular4 + Material2
- Angular4 幕课网
- angular4路由
- Angular4介绍
- angular4 实践
- angular4随记——angular4使用datatable
- Angular4.0.0正式版发布
- ES6+angular4+mysql杂记
- Angular4(一)
- Angular4.0 起步
- Angular4中的依赖注入
- Angular4中常用管道
- RHEL7修改网卡名称
- Spark内核深度剖析之宽依赖和窄依赖
- ccf 中间数
- 关于Android实现滑动返回的几种方法总结
- Children’s Queue(递推 + JAVA大数)
- angular4自定义模态弹框
- 最小公倍数
- Java适配器模式
- 《C++ Primer》读书笔记第十一章-1-关联容器概述
- KMP算法详解
- Java8中@Contended和伪共享
- DPDK简单example的阅读——l2fwd
- EPM问题汇总之-SmartView无法连接Essbase
- Android性能优化之电量优化