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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
在react中使用vue的状态管理的方法示例
May 02 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表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
.NET常见笔试题集
2012/12/01 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
社会公德演讲稿
2014/05/20 职场文书
体育运动口号
2014/06/09 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
车间主任岗位职责
2015/02/03 职场文书
会议简报格式范文
2015/07/20 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书