liuleng68 2018-04-10 09:36 采纳率: 0%
浏览 2953
已采纳

图中bootstrap弹窗div的实现

普通的弹窗，我已经会了，目前不明白的是图上这种弹窗，点击下一步，跳到另外一个div中去。最好有类似的代码图片说明

  • 写回答

5条回答 默认 最新

  • 斯洛文尼亚旅游 2018-04-10 09:52
    关注

    调用modal的show/hide隐藏显示对应的modal就行了

    DEMO

     <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 模态框（Modal）插件</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#step1">开始演示模态框</button>
        <div class="modal fade" id="step1" 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" id="myModalLabel">step1</h4>
                    </div>
                    <div class="modal-body">step1的内容</div>
                    <div class="modal-footer"><button type="button" class="btn btn-primary" onclick="$('#step1').modal('hide'); $('#step2').modal('show')">下一步</button></div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="step2" 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" id="myModalLabel">step2</h4>
                    </div>
                    <div class="modal-body">step2的内容</div>
                    <div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button></div>
                </div>
            </div>
        </div>
        <!--更多的步骤，按照step1的代码调用modal的api显示隐藏对应的modal--->
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

  • bootstrap实现弹窗和拖动效果
    2020-09-02 23:47
    在本篇文章中，我们将探讨如何利用Bootstrap实现弹窗（Modal）和拖动效果。 首先，创建一个能触发弹窗的元素通常是通过一个链接或按钮来完成的。在提供的代码片段中，`<a>`标签被用来触发弹窗，它有一个特殊的类`...
  • bootstrap弹窗demo
    2017-08-06 23:59
    在“bootstrap弹窗demo”这个压缩包中，很显然，它包含了一个关于如何在Bootstrap中创建和使用弹窗（Modal）的示例。下面我们将详细探讨Bootstrap弹窗及其相关知识点。 Bootstrap弹窗，也被称为模态对话框，是一种...
  • 使用JavaScript技巧实现Bootstrap弹窗
    2023-10-03 06:21
    CyberOI的博客 在Web开发中，弹窗是一种常见的用户界面元素，用于显示临时信息、警告、确认对话框等。Bootstrap是一个流行的前端框架，提供了...本文将详细解析如何使用JavaScript技巧来实现Bootstrap弹窗，并提供相应的源代码示例。
  • bootstrap弹窗示例
    2017-01-10 22:23
    "bootstrap弹窗示例 modal"这个标题暗示我们将探讨如何在Bootstrap中使用模态对话框。 Bootstrap的模态（Modal）是通过添加特定的HTML结构和CSS类来实现的。首先，我们需要一个`<div>`元素，带有`modal`和`fade`类...
  • Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
    2020-08-31 07:47
    Bootstrap Modal 是一个流行的前端框架 Bootstrap 中的组件，用于创建模态对话框。在开发过程中，有时我们需要在一个模态窗口内嵌套另一个模态窗口，即实现多层弹窗的叠加。然而，当尝试这样做时，可能会遇到一个...
  • jQuery+Bootstrap弹窗添加标签快捷方式代码.zip
    2023-09-22 00:22
    在本资源中，"jQuery+Bootstrap弹窗添加标签快捷方式代码.zip" 提供了一套结合了jQuery和Bootstrap的弹窗（Modal）功能，用于创建快速添加标签的交互体验。这个压缩包包含三个主要文件：`index.html`、`js` 和 `css`...
  • jQuery和Bootstrap实现高效弹窗标签管理系统
    2025-06-09 16:02
    三七二十一的七的博客 简介：本项目讲述了如何利用流行的前端框架jQuery和Bootstrap创建一个弹窗功能，用于用户添加和管理页面标签。项目详细解析了HTML结构、CSS样式、JavaScript逻辑、标签管理和交互反馈的实现，以及兼容性和性能优化...
  • Bootstrap实现dialog上一步下一步多个弹窗交互
    2024-07-25 02:21
    CyberGuru的博客 Bootstrap实现dialog上一步下一步多个弹窗交互 版本介绍： Bootstrap v3.3.7 jQuery v3.5.1 一、功能介绍 重新设置bootstrap主题色 内容区以card形式展示，纯js实现分页功能 共两步骤，第一步选择模板，第二步...
  • BootStrap modal模态弹窗使用小结
    2020-09-01 09:13
    Bootstrap模态弹窗（Modal）是前端开发中常用的一个组件，它允许用户在不离开当前页面的情况下与应用程序交互。在Bootstrap框架中，模态弹窗主要用于显示临时信息、确认操作或者进行表单填写等场景。以下是对...
  • 前端使用bootstrap和jquery制作弹窗
    2021-09-14 10:50
    西凉的悲伤的博客 link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" cros
  • 没有解决我的问题, 去提问