mootools系列:打造属于你自己的Popup(弹出框)——外观及应用篇
半透明化弹出框(Popup)边框
半透明化的边框很眩吧。其实实现起来很简单,只需设置一css属性:opacity。opacity指“不透明度”,取值在0和1之间,0表示全透明,1表示完全不透明。
在代码中,我将边框的不透明度设置为0.5。
弹出框(Popup)的淡入淡出效果
知道了不透明度opacity这一css属性,相应的使弹出框的该属性值在0与1之间有一个渐变的过程,即为淡入。反之为淡出。
在这里应用mootools中可控制任意css属性在两值之间过渡的tween类。
关闭弹出框时,我们需将其销毁。结合淡出效果,这个销毁的动作应发生在淡出效果完成时。代码如下:
2 onComplete: function () {
3 if (this.popupTable.getStyle('opacity') == 0)
4 this._cleanUp();
5 }.bind(this)
6 }
变身为alert
javascript中alert函数的功能仅仅是简单的提示、告之。基于当前自定义弹出框已经具有的功能,是很容易实现的。
2 var newP = new iSunPopup({ width: 380, height: 150, title: 'iSun alert', content: 'iSun alert content', buttons: [
3 {
4 text: 'Yes',
5 clickHandler: function () {
6 this.close();
7 }
8 }]
9 });
10
11 newP.open();
12 }
变身为confirm
javascript中的confirm函数较alert复杂。在应用中,用户可以选择confirm()的Yes或No,然后代码做出相应的处理。这一选择过程是运行阻塞的,javascript运行时停滞在这个地方来等待用户的处理。
然而我们自定义的弹出框无法阻塞javascript运行,也就是说无法通过相同的机制来实现confirm效果。
正面冲锋不成,就只能小路包抄了。
弹出框中按钮单击事件代码是自定义的,我们只需将用户选择Yes或No的处理过程直接定义在按钮事件中也就模拟出了“确认”的效果。
2 var newP = new iSunPopup({ width: 380, height: 150, title: 'iSun confirm', content: 'iSun confirm content', buttons: [
3 {
4 text: 'No',
5 clickHandler: function () {
6 alert('你点击了No,此处可编写No逻辑。');
7 this.close();
8 }
9 },
10 {
11 text: 'Yes',
12 clickHandler: function () {
13 alert('你点击了Yes,此处可编写Yes逻辑。');
14 this.close();
15 }
16 }]
17 });
18
19 newP.open();
20 }
附示例代码:iSunPopup.rar
相关文章:
mootools系列:打造属于你自己的Popup(弹出框)——基本结构篇
mootools系列:打造属于你自己的Popup(弹出框)——扩展功能篇
转载于:https://www.cnblogs.com/isun/archive/2011/05/17/2049099.html
mootools系列:打造属于你自己的Popup(弹出框)——外观及应用篇相关推荐
- popup弹出html页面,Popup弹出框绑定添加数据事件(步奏详解)
这次给大家带来Popup弹出框绑定添加数据事件(步奏详解),Popup弹出框绑定添加数据事件的注意事项有哪些,下面就是实战案例,一起来看一下. 逻辑 窗口P1中显示一组数据,并提供一个添加按钮 点击按 ...
- OpenLayers基础教程——popup弹出框
1.前言 在OpenLayers中,一般使用ol.Overlay实现popup弹出框,弹出框一般用于显示地图上兴趣点的一些属性信息,如下图所示.下面开始介绍实现方法. 2.准备测试数据 在SqlSer ...
- WPF---->自定义控件添加Popup弹出框
自定义控件,当点击自定义控件时弹出提示框 文章目录 重要属性 普通使用 自定义控件使用Popup 参考文档 重要属性 属性 名称 解释 使用方法 PlacementTarget 安置目标 Popup附 ...
- 简单实现Popup弹出框添加数据
逻辑 窗口P1中显示一组数据,并提供一个添加按钮 点击按钮,弹出新的浏览器窗口P2,在其中添加一条数据并提交后,窗口P2自动关闭 新添加数据动态添加到窗口P1中并被选中 所需知识:JS BOM 窗口对 ...
- mootools系列:打造属于你自己的Popup(弹出框)——扩展功能篇
为弹出框(Popup)添加"关闭(×)"按钮 如弹出框结构代码所示,关闭按钮标示"×"是放置在一div中的.使其具有关闭整个弹出框的功能,只要在创建该div时, ...
- JQUERY打造隐藏在左侧的弹性弹出菜单
代码简介: 隐藏在左侧的弹性弹出菜单,从淘宝扣下来的,也可作为JAvaScript缓冲动画的典型教程.本弹性菜单可扩展性强,实际上不光可以做成菜单,也可布局一些图文混排的内容或一段视频,总之被弹出的内 ...
- FM实现F4帮助系列三:弹出框多筛选…
FM实现F4帮助系列三:弹出框多筛选条件的搜索帮助(根据搜索帮助筛选字段) 函数:F4IF_GET_SHLP_DESCR F4IF_START_VALUE_REQUEST 效果图: 本例子代码: 找 ...
- 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题
小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题 参考文章: (1)小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢, ...
- uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别!
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
最新文章
- 阿里云ECS服务器的搭建
- 蓝桥杯-拿糖果(java)
- 论文笔记之: Deep Metric Learning via Lifted Structured Feature Embedding
- 《深入理解Hadoop(原书第2版)》——2.3Hadoop系统的组成
- java正则表达式性能_译:Java 中的正则表达式性能概述
- intern()方法的使用
- gravity 时序图绘制,改
- QT每日一练day25:触发绘画事件
- 【java】数组异常的处理
- virtual 初探
- html去除重复代码,simian 查找项目中的重复代码
- 2020SpringCloud学习年终总结——第九章-Gateway
- iOS创建自定义相册
- 09-03 NOIP模拟测试36
- 电脑桌面打开计算机窗口,电脑怎么打开运行窗口
- 第一次梦见这么多的狗
- RGCF: Refined Graph Convolution Collaborative Filering withConcise and Expressive Embedding
- 电线电缆很烫,都有哪些原因
- 余数大法写了个手机虚拟号
- 报头压缩-ROHC压缩系统
热门文章
- 使用seq2seq预测当天的股票价格
- useSetState
- 易语言WebUI教程 - 第三期 —— miniblink绑定、交互及传参
- 即将到来的”加密世界”
- Tomcat简介 安装 配置 示例
- 用R语言写一颗圣诞树
- 华为OD机试真题-货币单位换算【2023Q1】【JAVA、Python、C++】
- 证券公司信息化2续-在证券发行过程中为什么可能会需要有一个“认购管理统计系统”?
- PyQt5 pyqtgraph 实时绘制数据
- 美国超级计算机+“泰坦”,走进最强超级计算机 探访超算泰坦的核心构造