当前位置: 首页 > 编程笔记 >

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

殳俊晤
2023-03-14
本文向大家介绍Bootstrap模态对话框中显示动态内容的方法,包括了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模态对话框中显示动态内容的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是 Qt 所 独有的,在各种不同的平台下都存在。又有叫法是称为模式对话框,无模式对话框等。 所谓模态对话框就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进 行交互,直到该对话框关闭。对于非模 态对话框,当被打开时,用户既可选择和该对话框进 行交互,也可以选择同应用程序的其他窗口交互。 在 Qt

  • 本文向大家介绍实例详解BootStrap的动态模态框及静态模态框,包括了实例详解BootStrap的动态模态框及静态模态框的使用技巧和注意事项,需要的朋友参考一下 1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样 代码如下: 有疑问的可以在下面留言,欢迎大家一起交流 1.1动态模态框 1.2静态模态框 总结 以上所述是小编给大家介绍的BootStrap的动态

  • 问题内容: 我正在尝试使用Jasmine进行单元测试React Bootstrap模式对话框。但是它没有按预期工作。 这是使用最新版本的React,React Bootstrap,Jasmine的jsfiddle链接:http : //jsfiddle.net/30qmcLyf/3/ 测试失败: 第27-28行 39-40行 同样,第35-36行出了什么问题。如果我取消注释行,则会在注释中显示错误

  • 问题内容: 目前我的模态对话框是这样的 加载的Div包含在同一页面中。显示对话框时,如何将div移至第二页并通过Ajax加载内容?是否可以根据需要重用脚本来加载不同的内容? 问题答案: 看看Nemikor的这篇博客文章,它应该做您想要的。 http://blog.nemikor.com/2009/04/18/loading-a-page-into-a- dialog/ 基本上,在调用“打开”之前,

  • 主要内容:用法,实例,选项,方法,实例,事件,实例模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法 您可以切换模态框(Modal)插件

  • 问题内容: 我喜欢jQueryUI的对话框。但是,似乎没有一种动态加载内置内容的方法。我想我必须使用其他方法来实现这一目标?iframe仅在可见时才会加载内容吗?这是正确的方法吗? 如果其他对话框机制更适合仅在首次打开时加载内容,则我愿意接受。 问题答案: 这并非难事-仅此而已,我不会开始与iframe搞混。这样的事情怎么样? 基本上,您创建对话框,然后打开对话框,从服务器中加载一个html文件,