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 相关文章推荐
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 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
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
从0开始学Vue
2016/10/27 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
JS实现li标签的删除
2019/04/12 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python 12306抢火车票脚本
2018/02/07 Python
django创建简单的页面响应实例教程
2019/09/06 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
数控专业个人求职信范文
2014/02/05 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
交通事故私了协议书
2014/04/16 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
理想国读书笔记
2015/06/25 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
openstack中的rpc远程调用的方法
2021/07/09 Python