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

相关文章

  • javascript中"/"运算符常见错误

    javascript中"/"运算符常见错误

     javascript里面的"/"运算符跟C++里面的"/"运算符不一样,后者自动取整,前者若非整除则会得到小数(比如说5/2=2.5)。
    2010-10-10
  • js简单实现调整网页字体大小的方法

    js简单实现调整网页字体大小的方法

    这篇文章主要介绍了js简单实现调整网页字体大小的方法,通过javascript动态修改页面元素样式实现调整网页字体的功能,非常简单实用,需要的朋友可以参考下
    2016-07-07
  • 判断横屏竖屏(三种)

    判断横屏竖屏(三种)

    本文主要介绍了通过HTML,CSS,JS三种判断横屏竖屏的方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 使用js获取地址栏中传递的值

    使用js获取地址栏中传递的值

    本篇文章是对使用js获取地址栏中传递的值实现代码进行了详细的分析介绍,需要的朋友参考下
    2013-07-07
  • JS实现仿QQ面板的手风琴效果折叠菜单代码

    JS实现仿QQ面板的手风琴效果折叠菜单代码

    这篇文章主要介绍了JS实现仿QQ面板的手风琴效果折叠菜单代码,涉及JavaScript基于鼠标事件动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • javascript表单事件处理方法详解

    javascript表单事件处理方法详解

    这篇文章主要为大家详细介绍了javascript表单事件处理方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript生成指定范围随机数和随机序列的方法

    JavaScript生成指定范围随机数和随机序列的方法

    这篇文章主要介绍了JavaScript生成指定范围随机数和随机序列,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • Draggable Elements 元素拖拽功能实现代码

    Draggable Elements 元素拖拽功能实现代码

    虽说js框架到处都是, 都封装了很多实用的功能,能快速的让我们实现如动画,元素拖拽等功能, 不过由于好奇心的驱使, 有时想一探究竟, 看看一些功能是如何实现的
    2011-03-03
  • nodejs创建web服务器之hello world程序

    nodejs创建web服务器之hello world程序

    本文给大家分享nodejs创建web服务器之hello world程序,node真的很好用,不仅用v8引擎来解析了javascript外,还提供了高度优化的应用库,真的很好,有需要的朋友一起来学习吧
    2015-08-08
  • Javascript中的call()方法介绍

    Javascript中的call()方法介绍

    这篇文章主要介绍了Javascript中的call()方法介绍,本文讲解了Call() 语法、Call() 参数、Javascript中的call()方法、Call()方法的实例等内容,需要的朋友可以参考下
    2015-03-03

最新评论