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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JS检测图片大小的实例
Aug 21 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
解决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
文件系统基本操作类
2006/11/23 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Selenium控制浏览器常见操作示例
2018/08/13 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
EJB的基本架构
2016/09/22 面试题
英语自荐信范文
2013/12/11 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
《雷雨》教学反思
2014/02/20 职场文书
汽车促销活动方案
2014/03/31 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
社会心理学学习心得体会
2016/01/22 职场文书