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动态创建及移除div的方法
Jun 03 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
canvas实现图像放大镜
Feb 06 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
PHP 502bad gateway原因及解决方案
Nov 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
php简单随机字符串生成方法示例
2017/04/19 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
python能做哪方面的工作
2020/06/15 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
师范教师毕业鉴定
2014/01/13 职场文书
亲子拓展活动方案
2014/02/20 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
工作总结与自我评价
2014/09/18 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
刑事辩护词范文
2015/05/21 职场文书
一行Python命令实现批量加水印
2022/04/07 Python