html实现弹窗编辑资料,《小白HTML5成长之路33》自定义弹窗修改弹窗内容实现方法...

本文讲述了两位开发者老朱和小白在创建JavaScript弹窗控件时,探讨如何设置和调用对象属性的问题。他们讨论了通过属性设置弹窗的标题、内容和确认事件,并解决了在HTML中动态改变属性值时遇到的取值问题。最终,他们实现了通过方法赋值和alert方法直接弹出提示信息,同时优化了参数传递,使得传入的对象更加灵活。这是一个关于JavaScript对象和属性操作的实例教程。
摘要由CSDN通过智能技术生成

f26764e9bec8

“小白!对象方法里面调用自己的属性怎么调用?”

“this.语法调用啊!”

老朱说:“没事我就是随便问问,今天我们继续完善昨天的弹窗控件,还是打开昨天建的那个javascript文件里的代码吧!”

小白说:“好嘞,早就准备好了!”

f26764e9bec8

老朱又重新看了一遍代码说道:“小白,你说弹窗有哪几个地方是需要设置的?”

小白想了想说:“提示的标题、提示的内容、还有点了确定要触发的事件!”

“恩,这三个是比较关键的,如果要设置这三个内容,我们是不是应该先给Layer三个属性?”

“恩,我了解你的意思了,稍等,我把属性加上!”

f26764e9bec8

“奇怪了,我加上这三个属性后,在html里面让标题和内容动态变化怎么会取不到值呢?”

f26764e9bec8

老朱对小白说道:“代码一眼看上去没有问题,你可能会想在既然alert方法中能获取到html属性的值,为什么获取不到title和content的值呢?其实你在这里控制台输出一下可以看到,这三个值都可以直接在alert方法中输出。但是有一个点你不要忘了,我们在alert中拿到的html属性值在使用alert方法之前已经进行过计算,html属性是取不到title和content的值的,这块等你详细了解javaScript对象的机制以后就会明白,现在我们先不用深究,你用之前已经学到的知识想一想还有没有别的办法?”

小白想了一会,突然说道:“我知道了,把html属性改成方法进行赋值就可以了!稍等我再改一下。”

f26764e9bec8

“这次没有问题了,我把html改成了方法,然后在alert中将title和content的值赋了进去,弹窗不报undefined错误了!”

老朱高兴的说道:“是啊!这样我们在页面中给弹窗(Layer)的title和content赋值以后,通过alert就可以直接弹出结果了,你试试!”

f26764e9bec8

f26764e9bec8

“果然可以使用了!”

老朱跟小白说:“你现在通过设定属性才能弹窗,能不能实现这样一个功能,直接通过alert方法也可以实现弹窗提示信息。”

小白想了想说道:“可以,我把alert方法加上参数就可以了!”

f26764e9bec8

“好了,这下不但能够通过属性修改标题(title)和内容(content),通过alert方法也可以直接赋值了!”

“小白,这种方法确实可以实现我们想要的功能,不过为了方便我们给alert传递的参数最好改成一个javaScript对象,这样我们就不用考虑传递参数的顺序了。你再改改吧!”

f26764e9bec8

f26764e9bec8

“改好了,现在传递参数的时候传递一个Object对象就可以了。这块我再消化消化吧!感觉信息量有点大。”

老朱跟小白说:“其实也没多少吧!只不过我们一直在改,点击确定的事件还没做呢,还有关闭按钮,还有动画效果,还有……”

“唉~我还是先熟悉一下今天说的这点内容吧!”

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值