bootstrap-模态框
  TEZNKK3IfmPf 15天前 26 0

bootstrap-模态框

先创建一个按钮

bootstrap-模态框

模态框

三层结构

三个块

bootstrap-模态框

header,头部
body,身体
footer,底部

bootstrap-模态框

代码

bootstrap-模态框

效果

bootstrap-模态框

当前点击按钮没有效果。

下一步,让按钮与模态框关联起来

bootstrap-模态框

点击按钮后的效果

bootstrap-模态框

点击取消就关闭

bootstrap-模态框
dissmiss,消失

bootstrap-模态框

点击取消,框就会消失的了

添加一个fade样式,让出现有淡淡的感觉

bootstrap-模态框

设置大中小三个模态框
bootstrap-模态框

bootstrap-模态框
定义大的框

bootstrap-模态框
注意,加的位置,加在modal-dialog这里

定义小的框
bootstrap-模态框

中等的模态框就不加

看效果

大的框

bootstrap-模态框

中的框

bootstrap-模态框

小的框

bootstrap-模态框

用js控制

写一个自定义的按钮事件

先来一个按钮

bootstrap-模态框

再来jquery

先看结构

bootstrap-模态框

jquery

按钮的点击事件,让对应的模态框显示
bootstrap-模态框

效果

当前点击确定与取消是不能够有任何效果的

bootstrap-模态框

期望它的效果

先给个id,方便获取

bootstrap-模态框

然后继续写特效

bootstrap-模态框

当前效果,点击暗区也会隐藏,不期待这样的效果

bootstrap-模态框

解决办法

官方文档中

bootstrap-模态框

根据文档中的backdrop属性

bootstrap-模态框
把原来modal方法传参做一个改变

原来传参一个字符串,改变为传参为字典

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 15天前 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2023年11月15日   27   0   0 bootstrap
  TEZNKK3IfmPf   2023年11月15日   30   0   0 jQuery
  TEZNKK3IfmPf   2024年03月22日   65   0   0 jQueryeasyui
  TEZNKK3IfmPf   2024年03月29日   49   0   0 htmljQuery
TEZNKK3IfmPf