前端开发alert弹框方法
简单的三行代码，掌握三种弹窗！
粉丝1231获赞6.1万
相关视频
00:27查看AI文稿AI文稿前端开发小技巧，让输入框的宽度跟随文本的长度变化。 input 标签不能随着输入的文本长度来自动改变容器的宽度，可以使用 div 的 content editable 属性。使用 div 来模拟 input 就可以跟随文本的长度改变输入框的宽度啦！小提示，设置 div 的 content editable 属性后，还能输入副文本哦！
629学数学的程序猿
00:26查看AI文稿AI文稿点击按钮，显示对话框，选中对话框元素，找到对话框，自带变量。呆咯，为什么将内容改为 fos， 这样对话框默认为隐藏状态？选中按钮元素， 找到按钮，点击方法，输入内容 by logicibal 等于 too， 这样我们点击按钮时，对话框就自动弹出来了。关注我，学习更多前端知识！
18编程讲堂
17:50
09:59查看AI文稿AI文稿hello， 小伙伴们，上一节课呢，我们通过属性的方式是不是控制了弹框的显示隐藏呀，那这一个视频呢，我们要来学习通过 gs 代码的方式啊，控制这个弹框的显示和隐藏。 那有同学问了，我通过属性的方式控制的就挺好的呀，那我为什么还要学解释的方式呢？ 哎，那这里有个悠长劲，大家注意看啊，那这是一个让用户输入哎姓名的一个弹框，那在他点击保存按钮的时候，那我们想获取到用户输入的名字，然后提交到服务器保存， 那这个时候如果你直接给保存按钮绑哎，那个属性，那是不是一点击就隐藏了？那你有地方去获取输入框的哎，这个姓名 然后提交给服务器吗？哎，好像没有地方写这些 g s 代码吧，所以你看通过属性的方式哎，就不太行了。而且呢，在我们点击编辑姓名按钮出现这个弹框之前呢， 哎，我也要执行一个赋予输入框哎，默认姓名的 gs 逻辑代码啊，所以如果给他直接绑显示的属性， 哎，好像也没有办法办到我们的需求，是吧，所以你看啊，那在我们显示之前和保存隐藏之前，是不是都有一些额外的 gs 逻辑代码要执行呀？ 哎，那这个时候啊，我们就得通过 g s 的方式来控制这个弹框的显示和隐藏了啊，那这里边呢，我们先来做点击编 记姓名，出现弹框，点击保存按钮呢，隐藏弹框的哎，主要逻辑。然后呢，我们再来去写刚刚业务上说的那些哎，额外的 gs 代码啊，那我们要控制弹框的这个显示隐藏的 gs 代码要怎么写呢？哎，这里有一个势力代码啊， 那主要呢就分为两步，第一步呢，我们要先获取到，哎，你要控制的是哪一个啊？弹框的盒子的这个道， 接着在使用 both trap 的 gs 库提供的 both trap 点 model 这个方法啊，然后把这个盒子传进去，你就会得到哎，一个弹框对象了。 那接着第二步啊，那我们只要调用这个弹框对象内置的哎授方法就显示，那如果你调 用的是害的呢？哎，那对应这个弹框对象对应的盒子呢？哎，就会隐藏呗。好了，那这样说呢，大家可能没有什么感觉啊，那我们一起把这个语法呢结一张，然后来到代码区呢，一起来试试啊。好了，那我们切换到代码区 这边呢，是我提前准备的模板代码啊，那实际上 botherstrap 哎相关的哎，库呢和对应的标签盒子都已经准备好了， 所以你看那这个 model 的诶， border strap 弹块儿的盒子呢？诶，跟我们上一节课讲的这个结构啊是一样的， 也是分为头哎，身体和底部，而且包括里边的标题呀，输入框还有按钮，我已经给大家准备好了。好，那我们一会用哪个呢？再到网页上去找啊，所以我们 先把这个弹框的盒子给它折上，那接着编辑姓名的按钮呢，也已经准备好了，所以接下来呢，我们就来实现一下 g s 控制弹框的显示隐藏吧。那第一步我们先要创建一个弹框对象啊。好，那来到 g s 这边， 那我们看一眼截图，哎，第一步要做什么？哎，是不是要把你控制的那个弹框的，哎，那个盗墓获取到啊，所以这个弹框的盒子在这里，所以用他的，哎，自定义的类名我们获取一下啊。好，那这是我们的弹框的盗墓盒子， ok， 把类名传进去，接着呢，哎，是不是要用我们 border strap 库提供的这个 border strap 的哎对象，然后点内置 的 model 方法，那只要把这个盒子呢，哎传进去，那你就得到了一个跟这个弹框盒子对应的这个弹框对象了啊，那接下来我们是不是要点击这个编辑姓名的按钮， 哎，先让我们的哎弹框是不是显示啊赋予默认姓名呢？我们一会讲完这个显示隐藏再来补充啊。好，那我们找到这个按钮，哎对应的自定类名复制下来，获取一下这个标签。 好，然后呢，给他绑定一个点击事件啊，哎，那在点击的时候，哎，是不是要让这个弹框的盒子出现？怎么做？看截图。哎，是不是用这个弹框对象啊？所以呢，我们要 显示弹框，那就用弹框对线掉兽方法好了。那编辑姓名能不能出来对应的弹框盒子呢？我们来试一下啊，走你。哎，那弹框的盒子出现了， 那接着再点击保存的时候先让他隐藏啊。好，所以我们找一下这个保存按钮。 ok， 然后呢，定位到了一个 button， 然后呢，在后边有一个 acu 杠 bdn 好过来， 所以在保存。哎，这个按钮点击的时候，那我们先让弹框呢，哎，先隐藏好，那找到这个按钮 也是，哎绑定点击事件，那接着呢，我们第一步是创建弹框对象啊，第二步要么显示，要么隐藏，所以这里的 是啊，哎，那我们也写一个二，哎，叫隐藏弹框，那也是用对应的这个弹框对象调哪个方法？ 哎，隐藏叫害的。好了，那我点保存，看看能不能隐藏这个，哎，他控制的对应的弹框呢？好，来试一下啊，点击保存，哎，没有问题。 好了，那到此呢，其实通过 gs 方式控制对应弹框呢出现和隐藏，哎，我们主要的代码呢，就试完了。那接着我们刚刚说里边是不是还有些小业务呀，那我们再来补充一下啊，那在点击编辑姓名显示弹框之前，我们要做什么来的？ a 是不是要赋予一个默认姓名，是吧，所以在弹框显示之前啊，那赋予一个默认的姓名， 所以在这个上边写，对吧。哎，那那个输入框，哎，我们找一下啊，这个输入框。好，那在这里有一个类名叫 uz name， 获取一下，他给他赋予一个默认的姓名啊，好，获取之后 给他的挽留属性赋予个默认姓名好了，那我们点击编辑姓名显示之前来测一下啊，走你。那你看是不是显示之前执行了一些额外的 gs 逻辑代码啊，哎，没有问题啊， 那接着用户在这里写了一个名字之后，我们是不是还要去获取名字，然后提交给福气保存呀？所以呢，在点击这个保存按钮哎隐藏弹框之前，哎，那找到他啊，保存按钮在这里隐藏之前，所以在之前呢，我们要 哎获取姓名，然后先来做一个哎打印啊，因为呢，我们 excuse 相关的代码大家比较熟悉了，而且这里重点我们讲的是哎弹框对象的显示隐藏啊，所以这里呢，我们用一个打印来模拟一下， 好，那首先我们先来获取一下哎用户输入的姓名，好，把它复制下来，然后接着呢，我们来一个哎，打印好，那就模拟 哎，把姓名保存到福气上啊，好了，那把这个变量呢，我们在后边紧接着打印一下 好了，那保存隐藏之前，能不能把用户输入的姓名取出来呢？我们来试一下啊，好，那改个名字，我们叫黑马程序员，然后控制台打开好了，那我注意哦， 我要试了啊，点保存，那你看是不是隐藏之前哎成功的拿到了用户输入的这个姓名啊，好了，那到这里呢，我们的语法和业务呢，就已经全部完成了，那接下来我们再来总结一下，如何通过 gs 控制弹框的显示隐藏呢？ 哎，首先啊，第一步我们要先创建一个哎弹框对象，那这个对象呢，对应你指定要控制的哪一个弹框盒子啊，一对一的关系， 那接着呢，你掉这个弹框对象的哎瘦和害的方法，就能控制对应这个弹框盒子的显示隐藏了， ok， 那之前班有个小伙伴呢，问了一个特别好的问题啊，就是说什么时候我用属性方式控制，什么时候用 gs 的方 是控制呢？哎，那我们再来到 ppt， ok， 那这里边如果我在点击这个叉和取消的时候啊，那我想直接关闭当前的这个弹框，那我应该用哪一种方式呢？ 哎，直接关，哎，是不是用属性的方式就可以办到，对吧？那我们在点击编辑姓名和点击保存按钮的时候呢，哎，要先有一些 gs 逻辑执行后再让弹框显示隐藏，那我们应该用哪一种方式呢？ 哎，是不是就得用第二种方式了，对吧？所以当你有一些额外的逻辑要执行后，再控制显示隐藏啊。那就用我们 g s 的相关语法使用就行了。好了，那接下来呢，给大家点时间，来试一下我们 g s 控制哎弹框的显示隐藏吧。
12:54查看AI文稿AI文稿ok， 那咱们上几个讲了这个祖先传递啊，这个这个叫什么？呃状态属性是吧？那这个咱们做一个简单小实力做一个弹簧小实力。 什么小台湾小说呢？就是说我们再见面啊，有时候就要点击删除或者是修改的时候他会提醒你确认一下是吧，但是这个从这个时候页面出现一个弹 啊，一个遮罩层对吧？里边在里边有一个项目操作确认是我啊，对，往前走还是退后是吧。那好，我们就做这样一个实力来体验一下数据之间的啊，组线之间的数据传递。那好，我们先写一个大概 出现是吧那出现我们在哪里写呢？在这里写吧。好吧。呃 i love you。 好，写好之后我们来写一下 i acts， 好吧 i acts 是吧。 那好，我们给主页布一下局啊。拽面什么给一个啊，名字吧，叫什么嘛？是个周老头嘛，对吧。里面一个点位给一个 抗震的是吧？ 那好，我们给个样式吧给个样式之后我们来就是引用一下我提前准备好的一个 word ccs 那我们也录一下吧。 airpod 是吧？呃，上一个目录下来大 a blok nice 是不是那好吧，我们定一下遮罩层来吧。 点什么？马斯克宽百分百是吧？高百分之百 然后呢他是确定固定了是吧？ nice。 零 泡瓶是不是背景黑色啊？不啊啊，就是说那个透明度 op a 好，这个点四好吧，那掐他下面 什么康腾的对吧？然后是也是什么 pf 宽是吗？宽是三百吧，高也三百，然后是背景白色然后呢，他这个穿放 双十累计付五十 负五十是吧？然后是负五十。 ok， 那好， 那我们这样写完了，这里边我们写一个按钮让他消失。好吧。一贴这边不给钥匙了。叫什么呢？ 按钮是一个删除是吧？是这个 tomp 删除啊。那好吧基本要是就这样，那我在主页里面我引用一下。好吧，你们选 vip。 那把这个改一下吧哈。这个老是出现这么长的 在这里来碗汤不赖吃。应该在哪吧。 右手下面有个有没有阿姨 来解释一下表达哈。 嗯没有 没有的话这怎么出来呢？ 二一是吧。那我想就是说呃。把这个就直接改成骆驼离开， ok 好之后呢就变成这样。就是 克拉斯叫什么？我们现在写的主线大那个对吧。我们写一个主线叫 太阳系孟婆冷吃汤刷子。 然后是什么修补 pos 放进去是吧然后里面一个什么软的 比特第二位是吧。他里边有个按钮啊，我让他弹出来啊。安克里克这是点弹 弹出是吧。然后这里边我们引诱一下刚才那个 是吧？把刚才那个引用一下是吧。大概那个引用之后引用之后呢。 那这个时候我们来看一下对面渲染 啊。软的啊，这里边还没显示是吧，我们需要进入进来啊。 那就这样啊。哎他这个这里边有点问题啊，看一下啊样式没定好啊 啊这边还有一个 nice 百分之五十 是不是套也百分之五十。 ok 这样就好了是吧。他们问他说但是我想什么我想让他什么？让他是我 是什么。默认的是情况下是这个这个这个隐藏的对不对？那隐藏我们放在这里面这里面类似点是对比等于什么？ 我让什么呆了，搁这里边 穿一个什么？穿一个迪斯福利等于什么？瑞士点 是不是传过之后呢？我们在这里来看这个样式，我就漂了吧，我们再看这里，对吧？那他的样式是在这里改是吧？ 迪斯科雷等于什么？他穿过的属性是瑞士杰迪斯科雷 是不是？那传闻属性不是这个吗？传统属性，那就默认的他是闹，就是不显示，是不是？我们来看一下 是不是不显示。那好，我们来弹出一下，就在这里改变一下啊，这里改变一下。一个弹是吧？弹等于也是有一款是吧？弹出呢？然后是改变一下状态 red 什么晒 siri， 然后是迪斯布雷等于什么？ love you 不拉和他不是显示了吗？ ok， 那我们来看一下刷新点弹出是吧？那我想什么让点击这个时候他让他显隐藏怎么办呢？那好，我是不是应该在这里 点击是不是？那好，我点击一下昂克里克，我想雷斯普 boss 点害他。 这害婆婆不是说明什么？都是属性传过来，是不是属性传过来害的？那我就是给你怎么样？激素类，这个叫什么？写一个害的属性害的 我们认识点孩子，那就是这个孩子啊，我们需要做一个操作对吧？ 我们需要通过负起这个害的方法，对吧？来 把这个对的进行吗？改成原来的就出来对闹是吧？那我们改成什么？来试下 pat 这一点不要写了，上面布置过来。 ok， 点击取消，点击取消是吧，那这就实现了，咱们这个什么 对方看到是个实力，战国实力呢？其实很简单，我该总总结一下啊， 两个住键键 数据传递 如果么？通过 修改看看 是不是？那他是什么？第一步， 将副组件的吗？对对对，传给 传给此组建的有属性， 持续进店铺， 叔叔 借接收这个什么属性来确认，来更改样式是否显示，还是 你想是吧？第三步，在十组键里面， 什么自觉里面，是吧？触发一个方法啊，产生一个事件，产生一个事件，哎，这个事件 指向的是吗？是一个，是这个 建的属性，哎，这个组建的 属性指向的是不逐渐的方法是不是？第四步， 副组件通过 兔子间的方法，这个方法通过改变，改变什么 状态来更改什么来更改属性的是资助键 里面的纸从未达到 妈富 十吗？十拿数的 方法来更改状态，对吧？那这就是基本的这个弹弓实力，咱们提飞一下父父子组建相互权利的过程。那好，咱们下一个。
