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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 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多维数组的深度的方法
2014/01/07 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python实现推箱子游戏
2020/03/25 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
团代会邀请函
2015/02/02 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
演讲比赛主持词
2015/06/29 职场文书
教师外出学习心得体会
2016/01/18 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL