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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
javascript计时器详解
Feb 28 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
详解vue-cli3开发Chrome插件实践
May 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
PHP 中的一些经验积累
2006/10/09 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
关于python的list相关知识(推荐)
2017/08/30 Python
简单了解Python write writelines区别
2020/02/27 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
详解python的super()的作用和原理
2020/10/29 Python
珠宝的促销活动方案
2014/08/31 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
2015年司法局工作总结
2015/05/22 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
实操Python爬取觅知网素材图片示例
2021/11/27 Python
python的html标准库
2022/04/29 Python