[ Mini Kiebo ]
Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64
Path:
D:
/
xampp
/
htdocs
/
pmbku
/
assets
/
bower_components
/
SmartWizard
/
examples
/
[
Home
]
File: smartwizard-modal.html
<!doctype html> <html lang="en"> <head> <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Include Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Include SmartWizard CSS --> <link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" /> <!-- Optional SmartWizard theme --> <link href="../dist/css/smart_wizard_theme_circles.css" rel="stylesheet" type="text/css" /> <link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" /> <link href="../dist/css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <!-- External toolbar sample --> <div class="row d-flex align-items-center p-3 my-3 text-white-50"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Click to launch Smart Wizard modal </button> </div> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Smart Wizard modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <!-- Smart Wizard HTML --> <div id="smartwizard"> <ul> <li><a href="#step-1">Step Title<br /><small>Step description</small></a></li> <li><a href="#step-2">Step Title<br /><small>Step description</small></a></li> <li><a href="#step-3">Step Title<br /><small>Step description</small></a></li> <li><a href="#step-4">Step Title<br /><small>Step description</small></a></li> </ul> <div> <div id="step-1" class=""> Step Content </div> <div id="step-2" class=""> Step Content </div> <div id="step-3" class=""> Step Content </div> <div id="step-4" class=""> Step Content </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <!-- jQuery Versions --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!-- Include SmartWizard JavaScript source --> <script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Step show event $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) { //alert("You are on step "+stepNumber+" now"); if(stepPosition === 'first'){ $("#prev-btn").addClass('disabled'); }else if(stepPosition === 'final'){ $("#next-btn").addClass('disabled'); }else{ $("#prev-btn").removeClass('disabled'); $("#next-btn").removeClass('disabled'); } }); // Toolbar extra buttons var btnFinish = $('<button></button>').text('Finish') .addClass('btn btn-info') .on('click', function(){ alert('Finish Clicked'); }); var btnCancel = $('<button></button>').text('Cancel') .addClass('btn btn-danger') .on('click', function(){ $('#smartwizard').smartWizard("reset"); }); // Smart Wizard 1 $('#smartwizard').smartWizard({ selected: 0, theme: 'arrows', transitionEffect:'fade', showStepURLhash: false, toolbarSettings: {toolbarPosition: 'both', toolbarExtraButtons: [btnFinish, btnCancel] } }); }); </script> </body> </html>