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 相关文章推荐
js变量以及其作用域详解
Jul 18 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
关于JS中prototype的理解
Sep 07 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
你或许不知道的一些npm实用技巧
Jul 04 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如何编写易读的代码
2007/07/10 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
php学习之流程控制实现代码
2011/06/09 PHP
php生成RSS订阅的方法
2015/02/13 PHP
JS自动缩小超出大小的图片
2012/10/12 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python小白切忌乱用表达式
2020/05/29 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
代办委托书怎样写
2014/04/08 职场文书
房产继承公证书
2014/04/09 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers