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 相关文章推荐
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
javascript运行机制之执行顺序理解
Aug 03 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
提问的智慧
2006/10/09 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
为数据添加append,remove功能
2006/10/03 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
go语言计算两个时间的时间差方法
2015/03/13 Python
Python实现随机选择元素功能
2017/09/14 Python
python使用RNN实现文本分类
2018/05/24 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
SQL Server面试题
2016/10/17 面试题
工作中的自我评价如何写好
2013/10/28 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle