图中bootstrap弹窗div的实现

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

5个回答

调用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>
showbo
支付宝加好友偷能量挖 回复qq_29763559: 看我回复的另外一个示例
接近 2 年之前 回复
qq_29763559
liuleng68 回复showbo: 那怎么在模态框中引用这些div?
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复qq_29763559: 看我最后的回复,不要设置innerHTML,所有内容全部放到body里面,显示隐藏就行了
接近 2 年之前 回复
qq_29763559
liuleng68 回复showbo: 我设计了一个模态窗,在里面写了多个div模块,第一次弹窗得时候默认第一个div,点击下一步的时候,弹窗消失了。再点进去内容已经替换成了第2个div的内容了。(这是我需要的效果)但是能不能点击下一步,直接跳到第二个div的内容,整个弹窗不消失的那种?
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复qq_29763559: 什么问题的
接近 2 年之前 回复
qq_29763559
liuleng68 回复showbo: 步骤我已经实现得差不多了,有点小问题。能帮忙解决下吗?
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复qq_29763559: 或者采纳了我帮你写个demo
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复qq_29763559: 那不是在<div class="modal-body">step2的内容</div>这里放多个div替换step2的内容这些,第一个就显示第一个div,其他隐藏,一次类推
接近 2 年之前 回复
qq_29763559
liuleng68 我只建立一个弹窗,在弹窗里设置多个div,起先只显示一个,当点击下一步后,显示第二个div,隐藏第一个div.这样能实现图中的效果吗?
接近 2 年之前 回复
qq_29763559
liuleng68 明白了。顺便问一下,header部分,对应标题亮光要怎么实现呢?
接近 2 年之前 回复

<!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>
        <style>.step{display:none}.show{display:block}</style>
    </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">Modal</h4>
                    </div>
                    <div class="modal-body" id="dvSteps">
                        <div class="step show">step1</div>
                        <div class="step">step2</div>
                        <div class="step">step3</div>
                        <div class="step">step4</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" disabled onclick="showDiv(this,true)">上一步</button>
                        <button type="button" class="btn btn-primary" onclick="showDiv(this)">下一步</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function showDiv(btn, isPre) {
                var divs = $('#dvSteps>div'), cur = divs.filter('.show').index(), btns = $(btn).parent().find('button');
                isPre ? cur-- : cur++;
                divs.removeClass('show').eq(cur).addClass('show')
                btns.eq(0).prop('disabled', cur == 0 ? true : false);
                btns.eq(1).prop('disabled', cur == divs.length - 1 ? true : false)
            }
        </script>
    </body>
</html>

弹窗的图在哪里呢?是不是漏传了

qq_29763559
liuleng68 补发了。
接近 2 年之前 回复

直接替换页面内容$('.mainbox').html(data)

哦,用active属性应该也可以

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

3
bootstrap模态框中div切换问题
8
bootstrap怎么实现鼠标悬停在img上面之后切换照片
3
bootstrap datatable 实现复杂表格数据类型
2
bootstrap-table中如何实现带模糊查询的下拉菜单
2
关于bootstrap table这个插件的问题
4
前端小白请教一下bootstrap高度自适应问题
2
判断input的值是否为空,为空的话想让用Bootstrap插件写的模态框禁用,不弹出,请问改怎么写
1
bootstrap是怎么让二级菜单大屏幕时浮动在上方,小屏幕时不浮动位于在一级菜单父元素下方中
1
bootstrap中能实现按钮点击事件吗
0
bootstrap table onPostBody事件
1
bootstrap的导航下拉菜单
1
bootstrap 导航组件里面的li 在点击之后的高亮背景色怎么去掉 ? 怎么改变高亮背景色的颜色?
1
bootstrap如何让form-inline内的两个div分别左居中右居中?
0
表格用的是bootstrap table,导出插件用的是tableexport.js。希望导出table中勾选的内容。
4
bootstrap table onLoadSuccess里的代码不执行
1
bootstrap3的轮播图设置div背景图检查发现url(undefind)导致无法加载图片,什么原因?
1
bootstrap-datepicker弹出框覆盖了输入框,请问怎么解决?
1
bootstrap<div contentEditable="true" > 编辑的时候 总是跳出 字体 修改的工具栏,如何禁用
0
Bootstrap 模态框中嵌入jqgrid 切换页面jqgrid宽度会变为0
1
在bootstrap的模态框中使用ueditor(百度编辑器),点击字号,字体,字体颜色没有反应