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

Question

I have a wizzard. I would like when the user is on step 4 and he click on next he got a modal bootstrap to confirm to go on the last step. I managed to do it with the basic javacript confirm function.

 $(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> 

So it work well with the confirm function, but I would like to use the bootstrap modal instead. Here is what I tried :

 $(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

Check This Out.

 $(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>