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 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
解决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数组去重实例及分析
2013/11/26 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JQuery toggle使用分析
2009/11/16 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
浅谈Python中的模块
2020/06/10 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
局域网定义和特性
2016/01/23 面试题
加拿大探亲邀请信
2014/01/28 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
高三学习决心书
2014/03/11 职场文书
学校党员对照检查材料
2014/08/28 职场文书
党员证明信
2015/06/19 职场文书
个人道歉信大全
2019/04/11 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书