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 相关文章推荐
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
JS中数据结构之栈
2019/01/01 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
初步认识Python中的列表与位运算符
2015/10/12 Python
Python实现控制台进度条功能
2016/01/04 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
在Python中使用Neo4j的方法
2019/03/14 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
pandas数据处理进阶详解
2019/10/11 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
使用python求解二次规划的问题
2020/02/29 Python
使用Python实现批量ping操作方法
2020/05/06 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
物流管理专业职业生涯规划书
2014/01/06 职场文书
《散步》教学反思
2014/03/02 职场文书
毕业证委托书范文
2014/09/26 职场文书
新郎婚礼致辞
2015/07/27 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL