分析

素材默认的模态框内容都是显示状态

通过js要控制他们的开始和关闭

两种办法

1，控制css样式，控制他们的display的属性值，为none就不显示，为block就显示

2，控制盒子装备的样式。另写一个隐藏的样式，如果装备上就让他们隐藏，如果没有装备就让他们显示

本节我们使用方案一来完成

改一改代码

由于庶罩层与信息层都是一起出现，一起消失的

考虑把他们装在一个容器中，然后控制容器的消息与显示

容器盒子

控制容器的显示

效果

没有模态框了

点击按钮，显示模态框

思路

给按钮添加一个点击事件

事件中，让模态的容器盒子display状态为block就可

html代码

开始写效果

$(main);function main() {// 获取控制显示的按钮,绑定他的事件$("#btn_show_motai").click(show_motai);// 显示模态框的方法function show_motai() {// 让模态框容器显示$(".motai_container").css("display","block");}
}

效果，点击了按钮后，模态框就可以显示了

模态框，点击取消，让框消失

思路，给取消按钮一个点击事件

让模态框的容器的display样式为none就可

给取消按钮添加一个id

点击就让消失的事件代码

jquery-通过按钮控制模态的显示与隐藏相关推荐

jquery控制css的display(控制元素的显示与隐藏)
使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...
jquery控制div的显示与隐藏
使用jquery真的很方便,比如要控制div的显示与隐藏,一句话就搞定了,请看下面使用说明. $("#id").show()表示display:block, $("#id ...
angularjs ng-click传参控制ng-repeat元素显示与隐藏
ng-click传参控制ng-repeat元素显示与隐藏说明: 1.使用ng-repeat显示参数 2.通过ng-click按钮显示或隐藏内容.通过添加shows和id两个参数控制显示. <! ...
TIA博途WinCC PRO中通过脚本控制图层的显示和隐藏
TIA 博途WinCC PRO中通过脚本控制图层的显示和隐藏 WinCC Professional 项目中,可以使用脚本来控制画面上某个层的隐藏和显示,一旦设置该层隐藏,那么层中的对象也将隐藏,显示同 ...
Android之按钮点击事件——显示图片隐藏图片
哈喽!时隔两个月,我又和大家见面啦! 今天,我要分享的内容一如既往的很基础,即关于Android的按钮点击事件--显示图片&&隐藏图片,它的执行过程比较简单,所以这里我就不放什么图片或 ...
鼠标悬浮移出控制div的显示与隐藏
鼠标悬浮移出控制div的显示与隐藏当鼠标悬浮在某一个触发div显示的元素上时,通常JS为:οnmοuseοver="javascript:showAlertInfo(ShowID);&qu ...
超图控制图层的显示与隐藏
// 控制倾斜摄影的显示与隐藏 imgChange () { this.imgChecked = !this.imgChecked //点击之后切换图层的被选状态 if (this.imgChecke ...
Python——控制窗体的显示和隐藏以及位置和大小
控制窗体的显示和隐藏 Python中常用一些代码来控制任意窗体的显示,也可以将任意窗体隐藏. QQwin=win32gui . FindWindow("TXGuiFoundation&quo ...
Vue.js学习之路（五）控制页面元素显示和隐藏
在HTML中国我们通常是直接使用display的属性值,来控制元素的显示与隐藏,在vue中就主要通过两种方式v-if和v-show 两者都是通过对引号中的值或者表达式进行true或false进行判断实 ...

jquery-通过按钮控制模态的显示与隐藏

分析

改一改代码

点击按钮，显示模态框

模态框，点击取消，让框消失

jquery-通过按钮控制模态的显示与隐藏相关推荐

最新文章

热门文章