Bootstrap模态对话框中显示动态内容的方法


Posted in Javascript onAugust 10, 2018

首先引入bootstrap的js和css,在引入对应版本的jquery;

添加按钮,点击弹出模态窗体:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal" href="/Home/Test" rel="external nofollow" ></button>

创建模态对话框:

<div class="model fade" id="modal" tabindex="-1" role="dialog" aria_labelledby="myModelLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content"></div>

    <button class="btn btn-primary btn-lg" onclick="btnSaveClick()" data-dismess="modal">确定</div>

    <button class="btn btn-primary btn-lg" data-dismess="modal">取消</div>

 </div>

</div>

<script>

  var modelResult;

  $(function(){

    $("#model").on("hide.bs.modal"), function(){

      //在这里应用二级窗体返回的内容

    })

    });



  function btnSaveClick(){

    modelResult = this.parent.$("#txtName").val();

  }

</script>

注意:如果发现二级窗体打开一次后再打开失败,请看看href引用的界面中,是否在header中引入了css或js,这里不需要再进行引用,动态加载后会继承父窗体的js和样式

以上这篇Bootstrap模态对话框中显示动态内容的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 #Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 #Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 #Javascript
bootstrap下拉框动态赋值方法
Aug 10 #Javascript
layui实现点击按钮给table添加一行
Aug 10 #Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 #Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 #Javascript
You might like
PHP常用数组函数介绍
2014/07/28 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
去除链接虚线全面分析总结
2006/08/15 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
js href的用法
2010/05/13 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python内置异常类型全面汇总
2020/05/28 Python
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
信用社实习人员自我鉴定
2013/09/20 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
物控部经理职务说明书
2014/02/25 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
亮剑观后感
2015/06/05 职场文书
夏洛特的网观后感
2015/06/15 职场文书
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python