bootstrap modal.js最后一个完整按钮丢失

bootstrap modal.js last complete button missing

本文关键字：按钮 modal js 最后一个 bootstrap 更新时间：2023-09-26

我只是想学习modal.js。我希望在最后一页（数据步骤=3），我会看到一个完成按钮，当我点击它时，它会关闭模态。但这里的问题是，在最后一页，只有取消和上一个按钮可见。下一个按钮是隐藏的，这很好，但我想它会被完成按钮取代。我在这里错过了什么？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>WhyQ</title>
    <link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/style-o.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div id='tab-shopping-cart'  class="order-nav-tab" data-toggle="modal" data-target="#cartModal">
    <div class="order-nav-shopping-cart">Click here</div>
</div>
<div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="cartModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-cart modal-dialog-cart">
        <div class="modal-content modal-cart modal-content-cart">
            <div class="modal-body modal-cart" style="overflow:scroll">
                <div class="row hide cart-s1-common" data-step="1" id="modal-step-1">
                    <div class="row modal-header modal-header-cart" >
                        <div class="modal-shopping-cart"></div>
                    </div>
                    <div class="row cart-s1-title">
                        <div class="col-xs-5 txt-center">
                            ORDER
                        </div>
                        <div class="col-xs-2 txt-center">
                            PRICE
                        </div>
                        <div class="col-xs-2 txt-center">
                            QTY
                        </div>
                        <div class="col-xs-3 txt-center">
                            TOTAL
                        </div>
                    </div>
                    <br/>
                </div>
                <div class="row hide cart-s2-common" data-step="2">
                    <div class="row cart-s2-title">
                        <div class="col-xs-12 txt-center">
                            TIME REMAINING:<br/>
                            <label id="lblCountDown"></label>
                        </div>
                    </div>
                    <div class="row cart-s2-content">
                        <div class="col-xs-12 txt-center">
                            <div class="row">
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='10:00'/>
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='11:00'/>
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='12:00'/>
                            </div>
                            <div class="row">
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='13:00'/>
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='14:00'/>
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='15:00'/>
                            </div>
                            <div class="row">
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='16:00'/>
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='17:00'/>
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='18:00'/>
                            </div>
                            <div class="row">
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='19:00'/>
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='20:00'/>
                                <input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='21:00'/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row hide cart-s3-common" data-step="3">
                    This is the last step!!!
                </div>
            </div>
            <div class="modal-footer modal-footer-cart">
                <button type="button" class="btn btn-cart js-btn-step pull-left" data-orientation="cancel" data-dismiss="modal"></button>
                <button type="button" class="btn btn-cart js-btn-step" data-orientation="previous"></button>
                <button type="button" class="btn btn-cart btn-success js-btn-step" data-orientation="next"></button>
            </div>
        </div>
    </div>
</div>
<script>
    $('#cartModal').modalSteps({
    btnCancelHtml: 'Quit',
    btnPreviousHtml: 'Back',
    btnNextHtml: 'Go',
    btnLastStepHtml: 'Finish'
    });
</script>
</body>
</html>

我的建议是：

在header-jquery、bootstrap-css+其他css文件、bootstrap.js、responsd.js中排序，然后是jquery-bootstrap-modal-steps.js（正如我从您的代码中看到的那样，缺少这个）和特定的页面脚本。它应该是这样的。

 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 <title>WhyQ</title>
 <link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css">
 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <link rel="stylesheet" type="text/css" href="css/style-o.css">
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/respond.min.js"></script>
 <script type="text/javascript" src="js/jquery-bootstrap-modal-steps.js"></script>
 <script type="text/javascript" src="js/scripts.js"></script>
 </head>

您只能使用$('#myModal').modalSteps();并测试它是否正常工作，然后开始添加可用选项和回调

有关更多信息，请查看此=>http://www.jqueryscript.net/other/Create-Step-By-Step-Modal-with-jQuery-Bootstrap.html