- 1、本文档共1页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
这篇文章主要介绍了 BootStrap model 弹出框的使用,介绍的非常详细,具有参考借鉴
价值,感兴趣的朋友一起学习吧
之前,我们讲解了 bootstrap tab 的使用,今天我们来了解下 bootstrap 中 model 弹出窗
的使用。
效果:
代码:
lt;input id=btntext type=button value= 添 加 文 本 组 件 data-toggle=modal
data-target=#myModal href=../SysManage/ZuJianManage.aspx/gt;
lt;!-- Modal --gt;
lt;div class=modal hide fade id=myModal tabindex=-1 role=dialoggt;
lt;div class=modal-headergt;lt;button class=close type=button
data-dismiss=modalgt; ×lt;/buttongt;
lt;h3 id=myModalLabelgt;Modal headerlt;/h3gt;
lt;/divgt;
lt;div class=modal-bodygt;lt;/divgt;
lt;/divgt;
很简单吧,这样就可以了。
注意: data-target 属性,指向了 model 的 id ,所以点击按钮, model 就会弹出来了。
当然你也可以用 js 来控制。
如下代码:
显示: $(#myModal).modal(show);
隐藏: $(#myModal).modal(hide);
开关: $(#myModal).modal(toogle);
事件 : $(#myModal).on(hidden, function () {// do something …});
注意:我这边用到了 href 属性,这是让 model 去 remote 一个 url 。当然 ,你可以把你
要的内容,直接写在 model-body 里面。
认真看 model 的 div 结构, 你就会明白, model-body 是代表内容, model-header 是头部,
那么如果要在底部加两个按钮,那么就得用下面的代码了。
lt;div class=modal-footergt;
lt;a href=# class=btngt; 关闭 lt;/agt;
lt;a href=# class=btn btn-primarygt; 保存 lt;/agt;
lt;/divgt;
注意: 如果要给 model 设置宽度, 那必须得加上布局。 就是把 model 放在下面的代码块
中,并且设置 model 的宽度。 style=width:500px. 对了,你还不可以用 span 样式直接放到
class 里面。。
lt;div class=containergt;lt;/divgt;
以上所述是小编给大家介绍的 BootStrap model 弹出框的使用,希望对大家有所帮助!
您可能关注的文档
- 第五章目标的实施.pdf
- 第六讲定量研究化学反应.pdf
- 第十一课时《计算工具的认识》教学设计.pdf
- 第四册、安全生产活动台帐.pdf
- 第四章施工组织设计.pdf
- 第四章解决问题(1.pdf
- 筑公司副总述职报告范文.pdf
- 答复函标准格式范文.pdf
- 答毕仲举书阅读答案附翻译.pdf
- 简介Hadoop集群技术在优酷土豆的应用.pdf
- 10《那一年,面包飘香》教案.docx
- 13 花钟 教学设计-2023-2024学年三年级下册语文统编版.docx
- 2024-2025学年中职学校心理健康教育与霸凌预防的设计.docx
- 2024-2025学年中职生反思与行动的反霸凌教学设计.docx
- 2023-2024学年人教版小学数学一年级上册5.docx
- 4.1.1 线段、射线、直线 教学设计 2024-2025学年北师大版七年级数学上册.docx
- 川教版(2024)三年级上册 2.2在线导航选路线 教案.docx
- Unit 8 Dolls (教学设计)-2024-2025学年译林版(三起)英语四年级上册.docx
- 高一上学期体育与健康人教版 “贪吃蛇”耐久跑 教案.docx
- 第1课时 亿以内数的认识(教学设计)-2024-2025学年四年级上册数学人教版.docx
文档评论(0)