html5自动加载事件,《小白HTML5成长之路34》给自定义弹窗添加关闭窗口事件

34de92d3f04c

下午小白感觉有些感冒,身上特别沉,虽然一点状态都没有,但想起上午自定义弹窗的关闭事件还没有做,心里一直放不下,还是找到了老朱:“朱哥,有时间没?咱聊聊弹窗关闭的事情吧!”

老朱也有点感冒,哑着嗓子跟小白说:“我看你今天的状态也不好,今天只把窗口关闭的方法实现了吧!你现在对JavaScript的机制还不是特别熟练,我们也不要做的太深入了,尽量用之前接触过的方法来实现。你打开上午的代码我们对着代码说吧!”

34de92d3f04c

“我们现在把你做的功能屡一遍看看,首先你设置的Layer对象有两个属性:弹窗标题(title)和弹窗内容(content),通过alert方法传递一个含有title值和content值的对象后,先更改弹窗的标题和内容属性字段,然后将弹窗的html内容写入到body的底部。”

小白说道:“是的,我刚才想过一个关闭窗口的办法:在确定按钮上面添加一个onclick事件。测试了一下也可以关闭窗口,是不是这样就可以了?”

34de92d3f04c

34de92d3f04c

“你设置的确定按钮“点击事件”仅仅是从页面中找到弹窗容器后把它移除掉,假如我还想点了确定按钮以后,再做一些其他的处理就不好办了。具体来说就是弹窗出现以后我们给Layer窗口传递一个函数,当点击确定以后不但窗口关闭,还得执行我们传递的那个函数。”

“函数也能作为参数传递么?”,小白不解的问道。

“当然可以了,函数不但能作为参数传递,还能把多个函数放到数组里面,这个我们以后再详细讨论。你现在给layer传递的参数是一个对象,既然是对象肯定能添加方法,传递的那个函数就放到这个对象的方法里。”

“有点晕啊!”

“我把你之前页面中使用Layer.alert()方法传递的参数改一下你就明白了。”

34de92d3f04c

“看到没?之前我们的参数对象只包含title和content。现在增加了一个onsure,它的值就是一个让页面中的图片隐藏的函数!现在我把Layer的alert方法改一下,你看看。”

34de92d3f04c

“在alert方法中我们使用确定按钮的click事件,把传递进来的函数和隐藏窗口的方法都执行就可以了。现在看一下页面中的弹窗功能能不能实现点击确定以后隐藏图片!”

34de92d3f04c

老朱最后说道:“小白,你觉得现在的弹窗还有什么问题么?”

“我觉的挺不错了!难道还有什么需要设置的么?”

“还有很多,现在的这个弹窗在特别小的项目上可以使用,一旦碰到比较大的项目肯定就不适合了,因为现在很多HTML5页面都是使用首页加载卸载功能模块的方式,有时会碰到多个弹窗的问题,也可能碰到更复杂的问题,因为你现在还没有接触过,所以现在这个弹窗功能实现上也不用做太多的完善,完了有时间把弹窗的样式和动画效果做出来就可以了!”

“通过做这个弹窗控件,你应该对JavaScript有了重新认识了,你练习的时候重点思考一下JavaScript对象属性和方法之间的关系、对象作为参数传递、以及jQuery对象使用的append和remove方法。”

想学HTML5的朋友可以关注老炉,您的关注是我持续更新《小白HTML5成长之路》的动力!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值