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

超、凢脫俗 2022-10-07 05:48 163阅读 0赞

![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成长之路》的动力！

[f26764e9bec8]: /images/20221005/95dff993822e4117b04b45ccb046267c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 Openlayers中使用Overlay实现点击要素显示html内容弹窗并且动态更改弹窗内容

场景 Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动： [Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动\_BADA

- 日理万妓/ 2023年10月11日 17:05/ 0 赞/ 33 阅读

相关 vue 弹窗实现方法

![0008dc9e0b9c4e8b89f662df5f2020bb.jpeg][] Vue实现弹窗的方法有很多种，这里给出一个简单的示例： 1. 首先，在Vue项目中创

逃离我推掉我的手/ 2023年10月10日 22:46/ 0 赞/ 58 阅读

相关自定义底部弹窗

先看下效果图，用了4种不同的方法实现底部弹窗： ![1264306-20190906154047356-612493692.gif][] 1、dialog 2、activ

红太狼/ 2023年08月17日 17:09/ 0 赞/ 125 阅读

相关 js自定义弹窗

<div id="app_pop_up">

深藏阁楼爱情的钟/ 2023年02月16日 06:48/ 0 赞/ 11 阅读

相关 html+css+js实现简单的弹窗

// 代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF

偏执的太偏执、/ 2022年11月29日 11:42/ 0 赞/ 160 阅读

相关样式集（八）弹窗，规则弹窗，半透明弹窗

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

待我称王封你为后i/ 2022年11月05日 05:27/ 0 赞/ 290 阅读

相关 ant-design-vue 气泡自定义HTML弹窗

<span slot="manageOptionCodes" slot-scope="manageOptionCodes,record,index">

末蓝、/ 2022年11月03日 11:56/ 0 赞/ 242 阅读

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

![f26764e9bec8][] “小白！对象方法里面调用自己的属性怎么调用？” “this.语法调用啊！” 老朱说：“没事我就是随便问问，今天我们继续完善昨天的弹窗控

超、凢脫俗/ 2022年10月07日 05:48/ 0 赞/ 164 阅读

相关 html：自定义遮罩层弹窗（居中）

一、html代码html <div v-if="maskVisible" class="mask_layer" @click="关闭事件"> <di

布满荆棘的人生/ 2022年10月04日 13:59/ 0 赞/ 194 阅读

相关自定义 alert 弹窗

1.css样式 li-alert.css @-webkit-keyframes opacity { 0% { opacity

亦凉/ 2022年03月28日 14:12/ 0 赞/ 334 阅读