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 相关文章推荐
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
简单使用webpack打包文件的实现
Oct 29 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
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
Highcharts入门之简介
2016/08/02 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
解决Django连接db遇到的问题
2019/08/29 Python
python通过实例讲解反射机制
2019/10/17 Python
python三引号如何输入
2020/07/06 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
党校培训自我鉴定范文
2014/04/10 职场文书
二年级小学生评语
2014/04/21 职场文书
学校安全管理责任书
2014/07/23 职场文书
民政局未婚证明
2015/06/15 职场文书
七年级数学教学反思
2016/02/17 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
在python中实现导入一个需要传参的模块
2021/05/12 Python
css height属性中的calc方法详解
2021/06/03 HTML / CSS
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
MySQL数据库完全卸载的方法
2022/03/03 MySQL
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript