javascript - 多步模式 - 带进度条

Question

我正在尝试在我的网站上为入职向导构建一个弹出窗口。我想进一步完善它，但我遇到了如何前进的问题。

问题:

• 我希望弹出窗口出现在页面加载时(并且仅在第一次加载时出现)访问)

• 我希望进度条随用户一起激活，所以如果他们处于第一步 - 1 将突出显示，依此类推

  <div id="sampleModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myTitle" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="visible-xs">&times;</span>
  
                  </button>
                   <h4 class="modal-title" id="myTitle">Modal Title</h4>
  
              </div>
              <div class="modal-body">
                  <div id="step1"> <span>Do something for Step 1</span>
  
                      <input type="textbox" />
                      <button id="btnEndStep1">NEXT STEP</button>
                  </div>
                  <div id="step2" class="hideMe"> <span>Now select something for Step 2</span>
  
                      <select name="myList">
                          <option value=""></option>
                          <option value="This">This</option>
                          <option value="That">That</option>
                          <option value="Other">Other</option>
                      </select>
                      <button id="btnEndStep2">NEXT STEP</button>
                  </div>
                  <div id="step3" class="hideMe"> <span>Finally, type something for Step 3</span>
  
                      <input type="textbox" />
                      <button id="btnEndStep3">END</button>
                  </div>
              </div>
              <div class="modal-footer">
                <ul id="progressbar">
                  <li class="active">1</li>
                  <li>2</li>
                  <li>3</li>
              </ul>
              </div>
          </div>
      </div>
  </div>
  <button id="showModal" data-toggle="modal" data-target="#sampleModal">The Modal</button>
  

查看实际效果 - https://jsfiddle.net/32rL6gxk/23/

Answer 1

我已经做了更改，您可以查看下面提供的 fiddle : https://jsfiddle.net/32rL6gxk/25/

$("#btnEndStep1").click(function () {
    $('ul').children().removeClass('active');
    $("#progressbar li").eq(1).addClass('active');
    $("#step1").addClass('hideMe');
    $("#step2").removeClass('hideMe');
});
$("#btnEndStep2").click(function () {
    $("#progressbar li").eq(1).removeClass('active');
    $("#progressbar li").eq(2).addClass('active');
    $("#step2").addClass('hideMe');
    $("#step3").removeClass('hideMe');
});
$("#btnEndStep3").click(function () {
    // Whatever your final validation and form submission requires
    $("#sampleModal").modal("hide");
});