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 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
Angular单元测试之事件触发的实现
Jan 20 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
解决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/08/11 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php数组键值用法实例分析
2015/02/27 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
python 输出所有大小写字母的方法
2019/01/02 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
英语简历自我评价
2014/01/26 职场文书
户外拓展活动方案
2014/02/11 职场文书
五一口号
2014/06/19 职场文书
小学科学课教学反思
2016/02/23 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android