如何通过确认和引导模态获得相同的行为

Question

我很讨厌。我想当用户进入第4步时，他单击下一步，他得到一个模态引导程序，以确认继续进行下一步。我设法通过基本的javacript确认功能来做到这一点。

$(document).ready(function(){
    // Smart Wizard
    $('#smartwizard').smartWizard({
        lang: {
            'next': 'Next',
            'previous': 'Previous'
        },
        selected: 0,
        showStepURLhash: false,
        theme: 'default',
        transitionEffect:'fade',
        anchorSettings: {
            markDoneStep: true, // add done css
            markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
            removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
            enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
        }
    });
    $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
        if(stepNumber == 3 && stepDirection =='forward'){
            var res = confirm("Go to the last page ?");
            if(!res){
                console.log('Cancelled')
            }else{
                console.log('Go to last step')
            }
            return res;
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/smartwizard@4.3.1/dist/js/jquery.smartWizard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/smartwizard@4.3.1/dist/css/smart_wizard.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="smartwizard">
    <ul>
        <li>
            <a href="#step-1">
                <div style="text-align:center">
                Step-1
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-2">
                <div style="text-align:center">
                Step-2
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-3">
                <div style="text-align:center">
                Step-3
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-4">
                <div style="text-align:center">
                Step-4
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-5">
                <div style="text-align:center">
                Step-5
                </div>
                <br />
            </a>
        </li>
    </ul>
    <div>
        <div id="step-1">
            STEP1
        </div>
        <div id="step-2">
            STEP2
        </div>
        <div id="step-3">
            STEP3   
        </div>
        <div id="step-4">
            STEP4
        </div>
        <div id="step-5">
            STEP5       
        </div>
    </div>
 </div>

因此它可以与Confirm函数一起很好地工作，但是我想改用bootstrap模态。这是我尝试过的：

$(document).ready(function(){
    // Smart Wizard
    $('#smartwizard').smartWizard({
        lang: {
            'next': 'Next',
            'previous': 'Previous'
        },
        selected: 0,
        showStepURLhash: false,
        theme: 'default',
        transitionEffect:'fade',
        anchorSettings: {
            markDoneStep: true, // add done css
            markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
            removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
            enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
        }
    });
    $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
        if(stepNumber == 3 && stepDirection == 'forward'){
            $('#confirmModal').modal('show');
            /*
            if(confirmbuttonclicked){
              go to step5
            }else{
              stay on current step
            }
            */
            return false; //WAIT FOR USER TO CONFIRM
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/smartwizard@4.3.1/dist/js/jquery.smartWizard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/smartwizard@4.3.1/dist/css/smart_wizard.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="smartwizard">
    <ul>
        <li>
            <a href="#step-1">
                <div style="text-align:center">
                Step-1
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-2">
                <div style="text-align:center">
                Step-2
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-3">
                <div style="text-align:center">
                Step-3
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-4">
                <div style="text-align:center">
                Step-4
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-5">
                <div style="text-align:center">
                Step-5
                </div>
                <br />
            </a>
        </li>
    </ul>
    <div>
        <div id="step-1">
            STEP1
        </div>
        <div id="step-2">
            STEP2
        </div>
        <div id="step-3">
            STEP3   
        </div>
        <div id="step-4">
            STEP4
        </div>
        <div id="step-5">
            STEP5       
        </div>
    </div>
 </div>
 
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirm</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            Go to the last step ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button id="installbtn" type="button" class="btn btn-primary">Confirm</button>
            </div>
        </div>
    </div>
</div>

Answer 1

签出。

$(document).ready(function(){
    // Smart Wizard
    var IsConfirm=false;
    $('#smartwizard').smartWizard({
        lang: {
            'next': 'Next',
            'previous': 'Previous'
        },
        selected: 0,
        showStepURLhash: false,
        theme: 'default',
        transitionEffect:'fade',
        anchorSettings: {
            markDoneStep: true, // add done css
            markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
            removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
            enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
        }
    });
    $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
        if(stepNumber == 3){
            $('#confirmModal').modal('show');
            if(IsConfirm==false)
            {
              return false; //WAIT FOR USER TO CONFIRM
            }
            if(IsConfirm==true)
             {
                  IsConfirm=false;
            }
        }
    });
    
    $("#installbtn").click(function(){
    IsConfirm=true;
         $('#smartwizard').smartWizard("next");
            $('#confirmModal').modal('hide');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/smartwizard@4.3.1/dist/js/jquery.smartWizard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/smartwizard@4.3.1/dist/css/smart_wizard.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="smartwizard">
    <ul>
        <li>
            <a href="#step-1">
                <div style="text-align:center">
                Step-1
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-2">
                <div style="text-align:center">
                Step-2
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-3">
                <div style="text-align:center">
                Step-3
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-4">
                <div style="text-align:center">
                Step-4
                </div>
                <br />
            </a>
        </li>
        <li>
            <a href="#step-5">
                <div style="text-align:center">
                Step-5
                </div>
                <br />
            </a>
        </li>
    </ul>
    <div>
        <div id="step-1">
            STEP1
        </div>
        <div id="step-2">
            STEP2
        </div>
        <div id="step-3">
            STEP3   
        </div>
        <div id="step-4">
            STEP4
        </div>
        <div id="step-5">
            STEP5       
        </div>
    </div>
 </div>
 
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirm</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            Go to the last step ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button id="installbtn" type="button" class="btn btn-primary">Confirm</button>
            </div>
        </div>
    </div>
</div>