Bootstrap模态对话框中显示动态内容的方法

 更新时间:2018年08月10日 09:41:23   作者:henreash  
今天小编就为大家分享一篇Bootstrap模态对话框中显示动态内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

首先引入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模态对话框中显示动态内容的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS多文件上传的实例代码

    JS多文件上传的实例代码

    本文通过实例代码给大介绍了js多文件上传的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-01-01
  • JavaScript 的方法重载效果

    JavaScript 的方法重载效果

    JavaScript 语言的方法声明中,不能明确指定参数的类型和个数,所以不能实现方法的重载,但是我们可以用其他的方法来实现重载的效果。
    2009-08-08
  • JavaScript实现二叉树定义、遍历及查找的方法详解

    JavaScript实现二叉树定义、遍历及查找的方法详解

    这篇文章主要介绍了JavaScript实现二叉树定义、遍历及查找的方法,结合实例形式较为详细的分析了二叉树的相关概念及javascript构建二叉树、遍历、查找二叉树的常用操作技巧,需要的朋友可以参考下
    2017-12-12
  • js的2种继承方式详解

    js的2种继承方式详解

    这篇文章主要介绍了javascript的2种继承方式,分析对象冒充和原型链方式的不同,需要的朋友可以参考下
    2014-03-03
  • Flexigrid在IE下不显示数据的有效处理方法

    Flexigrid在IE下不显示数据的有效处理方法

    Flexigrid在IE下不显示数据的处理方法是:指定一下Ajax请求数据的方式为Get方式,遇到此问题的朋友可以参考下
    2014-09-09
  • js 链式延迟执行DOME

    js 链式延迟执行DOME

    js 链式延迟执行DOME,需要的朋友可以参考下。
    2012-01-01
  • 使用20行JS代码实现屏幕录制功能

    使用20行JS代码实现屏幕录制功能

    在开发中可能有遇到过屏幕录制的需求,无论是教学、演示还是游戏录制,都需要通过屏幕录制来记录和分享内容,MediaRecorder 是一种强大的技术,可以在浏览器端实现屏幕录制功能,本文将介绍如何使用JS MediaRecorder 实现屏幕录制,需要的朋友可以参考下
    2023-11-11
  • Javascript实现禁止输入中文或英文的例子

    Javascript实现禁止输入中文或英文的例子

    这篇文章主要介绍了Javascript实现禁止输入中文或英文的方法实例,本文方法都是使用正则表达式实现,需要的朋友可以参考下
    2014-12-12
  • js知识点总结之getComputedStyle的用法

    js知识点总结之getComputedStyle的用法

    getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值,下面这篇文章主要给大家介绍了关于js知识点总结之getComputedStyle用法的相关资料,需要的朋友可以参考下
    2022-10-10
  • JavaScript 数组运用实现代码

    JavaScript 数组运用实现代码

    复习一下JS中数组的运用。学习js数组的朋友可以参考下。
    2010-04-04

最新评论