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 相关文章推荐
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
JS实现图片切换效果
Nov 17 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 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生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
智能钱包:Ekster
2019/11/21 全球购物
数学系毕业生的自我评价
2014/01/10 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
企业精神口号
2014/06/11 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
限期整改通知书
2015/04/22 职场文书
考试后的感想
2015/08/07 职场文书
如何撰写促销方案?
2019/07/05 职场文书
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
PHP正则表达式之RCEService回溯
2022/04/11 PHP
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers