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 应用类库代码
Jun 02 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 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
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
js实现验证码功能
2020/07/24 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
详解python开发环境搭建
2016/12/16 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python 画函数曲线示例
2019/12/04 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
粗加工管理制度
2014/02/04 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
场地使用证明模板
2014/10/25 职场文书
招商引资工作汇报
2014/10/28 职场文书
写给女朋友的保证书
2015/05/09 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
springboot入门 之profile设置方式
2022/04/04 Java/Android
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python
Go语言入门exec的基本使用
2022/05/20 Golang