`
天梯梦
  • 浏览: 13741816 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

Bootstrap 3 添加外部页面到弹出窗口Bootstrap 3 with remote Modal

 
阅读更多

If a remote URL is provided, content will be loaded via jQuery’s load method and injected into the root of the modal element.

<a data-toggle="modal" href="to-another-url-page" data-target="#myModal">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body"><div class="te"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

 

DEMO

 

当然,最详细的文档在这里:http://getbootstrap.com/javascript/#modals

Modals中文说明:http://www.w3schools.com/bootstrap/bootstrap_modal.asp

原文:Bootstrap 3 添加外部页面到弹出窗口Bootstrap 3 with remote Modal

 

 

 

 

 

 

分享到:
评论

相关推荐

    详解bootstrap的modal-remote两种加载方式【强化】

    Modal-Remote是Bootstrap Modal的一个特性,它允许动态地从远程URL加载内容到Modal窗口中,提供了两种主要的加载方式。 **方法一:使用链接加载** 在HTML中,你可以通过设置`data-toggle="modal"`和`data-target="#...

    Bootstrap modal只加载一次数据的解决办法(推荐)

    在上面的代码中,我们使用 remote 选项来让 Modal 加载 `page.jsp` 页面到 `.modal-body` 中。 结论 在这篇文章中,我们详细介绍了 Bootstrap Modal 只加载一次数据的问题,并提供了两种解决办法:使用 hidden ...

    在iframe中使bootstrap的模态框在父页面弹出问题

    在这个解决方法中,我们使用了bootstrap的remote属性,使模态框在父页面弹出,remote属性可以指定模态框的内容来自哪里,在这里,我们将其指定为 "./model.html",即模态框页面的地址。 在实际开发中,我们可以根据...

    浅析BootStrap中Modal(模态框)使用心得

    在本文中,我们将深入探讨Bootstrap框架中的Modal模态框,这是一种强大的UI元素,可以极大地提升网站的用户体验。Bootstrap模态框是基于jQuery插件构建的,它允许开发者创建交互式的模态窗口,用于显示额外信息、...

    BootStrap modal模态弹窗使用小结

    Bootstrap模态弹窗(Modal)是前端开发中常用的一个组件,它允许用户在不离开当前页面的情况下与应用程序交互。在Bootstrap框架中,模态弹窗主要用于显示临时信息、确认操作或者进行表单填写等场景。以下是对...

    利用BootStrap弹出二级对话框的简单实现方法

    在Bootstrap中,对话框(也称为模态窗口)是通过添加`class="modal"`到`&lt;div&gt;`元素来创建的。在给定的示例中,我们可以看到有两个这样的`&lt;div&gt;`,分别用于一级对话框(`id="codeMapEditModal"`)和二级对话框(`id=...

    rails-bootstrap-modals:这个应用程序展示了如何在 rails 4 中使用模态

    模态(Modal)是 Bootstrap 提供的一种功能,它可以创建弹出窗口,用户可以在不离开当前页面的情况下查看或输入额外信息。这在许多场景下都非常有用,比如表单提交、确认操作或者显示详细信息。 首先,要在 Rails 4...

    rails-bootstrap-modal:在 Rails 中的 Bootstrap 模式中显示视图的示例

    此示例显示如何使用 JS 视图在 Rails 中的 Bootstrap 模式中显示表单。 此解决方案背后的关键思想是,您可以创建路由,而不是呈现 HTML 或将用户重定向到另一个操作,而是返回一些在客户端上执行的 JS 代码。 让...

    Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

    在使用 Bootstrap 的模态对话框时,有时我们需要动态地从远程URL加载数据到模态框内,以便展示最新的内容。然而,默认情况下,Bootstrap 的模态对话框只会加载一次远程数据,后续再打开同一模态框时,不会重新请求...

    详解处理bootstrap4不支持远程静态框问题

    在Bootstrap 4中,远程静态框(Remote Modal)的功能已被移除,这导致了之前使用该功能的开发者遇到一些问题。远程静态框是指通过点击一个链接或按钮,动态加载远程内容到模态框(Modal)中。在Bootstrap 3中,可以...

    基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() ...

    Bootstrap-3-Tutorial-82---Modals:以下视频教程的代码

    在Bootstrap 3中,模态(Modals)是一个非常重要的组件,它允许开发者创建弹出窗口,通常用于显示详细信息、对话框或者进行表单提交等交互。本教程将深入探讨如何使用Bootstrap 3来创建和定制模态。 模态是通过...

    封装的dialog插件 基于bootstrap模态对话框的简单扩展

    Bootstrap模态对话框(Modal)是一种常见的UI组件,用于展示弹出式的窗口,通常用于提示、确认、输入等场景。在原生Bootstrap中,每个模态对话框需要在HTML中单独编写结构,这在需要频繁使用对话框的情况下显得较为...

    Bootstrap基本插件学习笔记之模态对话框(16)

    在Bootstrap框架中,模态对话框是通过jQuery插件实现的,提供了一种简单且可定制的方式来创建弹出式窗口。在本篇笔记中,我们将深入探讨如何使用Bootstrap模态对话框。 首先,为了使用Bootstrap模态对话框,我们...

    bootstrap data与jquery .data

    Bootstrap和jQuery都是前端开发中非常流行的库,它们各自提供了一套用于操作DOM元素的data方法,但使用方式和机制存在一些差异,本文将探讨这两者的区别及其内部实现。 jQuery的`.data()`方法是一种常用的数据存储...

Global site tag (gtag.js) - Google Analytics