工作进度条完成后自动下一步分步选项卡

时间：2018-02-06 07:54:52

标签： javascript html css

有3个分步标签。打开第二个选项卡后，将激活进度条。必要时，进度条必须到达结尾，选项卡必须自动转移到第三个选项卡（最后一个）。怎么能实现呢？我将非常感谢更正后的代码。我不明白js。

＆＃13;
＆＃13; 
$('#myBtn').on('click', function() {
  $('#myModal')
    .show(0)
    .find('.modal-bodies > .modal-body')
      .eq(0)
      .addClass('is-showing');
});

$('.close').on('click', function() {
  $('#myModal')
    .hide(0)
    .find('.modal-bodies > .modal-body')
    .removeClass('is-showing');
});

$('#myModal .button').on('click', function() {
  var parent = $(this).parents('.modal-body');

  if( parent.is(':last-child') ) {
    
    return false;
  }

  parent
    .removeClass('is-showing')
    .next('.modal-body')
    .addClass('is-showing');
});


function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 100);
  if (al == 100) {
    bar.value = 100;
    clearTimeout(sim);
 
  }
}
＆＃13; 
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.modal-content{

}


.st-btn{
  font-size: 50px;
}

.modal{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}


.close{
padding: 5px 40px;
border-radius: 5px;
border: 1px solid #ddd;
background: #fff;
color: #000;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
margin-top: 20px;
margin-right: 10px;
}


.button{
padding: 5px 40px;
border-radius: 5px;
background: #019CDE;
color: #fff;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
margin-left: 10px;
}


.text-center{
text-align: center;
}


.modal-wrap{

}


.modal-bodies{
position: relative;
}


.modal-body{
color: #fff;
background-color: #000;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: none;
}


.modal-body.is-showing{
  display: block;
}


.text-confirm{
  font-size: 25px;
  text-align: center;
  padding-bottom: 15px;
}


.description-confirm{
  font-size: 15px;
}


.accept-confirm{
  height: 50px;
  width: 300px;
  margin-left: 10px;
  background-color: #fff;
  border-radius: 10px;
}


.accept-text{
  padding-top: 5px;
  color: #000;
}


#loading{
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top-color: #ff6a00;
  border-radius: 100%;
  animation: round 2s linear infinite;
}

@keyframes round{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}


.loading-text{
  color: #fff;
}


.loading-modal{
  text-align: center;
  padding-top: 80px;
}


.loading-circle{
position: absolute;
left: 0;
right: 0;
top: 50px;
bottom: 0;
margin: auto;
}

progress[value] {
  -webkit-appearance: none;
   appearance: none;

  width: 250px;
  height: 20px;
}
＆＃13; 
<html lang="en-En">

<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">

	<title>Test</title>
</head>

<body>
	<button id="myBtn" class="st-btn">Start</button>
	<div id="myModal" class="modal">
		<div class="modal-content">		
			<div class="modal-wrap">
			  <div class="modal-bodies">
			    <div class="modal-body modal-body-step-1 is-showing">
			      	<div class="text-confirm">Confirm<br><a class="description-confirm">Please confirm.</a></div>
			      	<form>
			        	<div class="text-center">
			        		<button class="close">Cancel</button>
			        		<div class="button" onclick='start(0)'>Confirm</div>
			        	</div>
			      	</form>
			    </div>
			    <div class="modal-body modal-body-step-2">
					<div class="loading-modal">
					    <div class="loading-circle" id="loading"></div>
					    <div class="loading-text" id="finalMessage">Proccessing request...</div>
						<progress class="progress-bar" id="progressBar" value="0" max="100"></progress>
					
					</div>
			    </div>
			    <div class="modal-body modal-body-step-3">
			    	<div class="text-center">
			      		<button>Verify Now</button>
			      	</div>
			    </div>
			  </div>
			</div>
		</div>
	</div>

	<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="js/modal.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我从中获取了这个脚本 - https://jsfiddle.net/32rL6gxk/并根据您的需要进行了一些修改。希望这会有所帮助.. 

    <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>
                                    <div class="text-confirm">Confirm<br><a class="description-confirm">Please confirm.</a></div>
                                    <form>
                                            <div class="text-center">
                                                    <button class="close">Cancel</button>
                                                    <div class="button" id="btnEndStep1">Confirm</div>
                                            </div>
                                    </form>
                        <button id="btnEndStep1" style="visibility: hidden;">NEXT STEP</button>
                    </div>
                    <div id="step2" class="hideMe"> <span>Now select something for Step 2</span>

                        <div class="loading-circle" id="loading"></div>
                                                <div class="loading-text" id="finalMessage">Processing request...</div>
                                                    <progress class="progress-bar" id="progressBar" value="0" max="100"></progress>


                                                    <button id="btnEndStep2" style="visibility:hidden;">NEXT STEP</button>
                    </div>
                    <div id="step3" class="hideMe"> <span>Finally, type something for Step 3</span>
                        <button id="btnEndStep3">Verify</button>
                    </div>
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>
    <button id="showModal" data-toggle="modal" data-target="#sampleModal">Open The Modal</button>


         <style>


        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }



        .st-btn{
          font-size: 50px;
        }

        .modal{
        display: none;
        position: fixed;

        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.9);
        }


        .close{
        padding: 5px 40px;
        border-radius: 5px;
        border: 1px solid #ddd;
        background: #fff;
        color: #000;
        letter-spacing: 1px;
        display: inline-block;
        cursor: pointer;
        margin-top: 20px;
        margin-right: 10px;
        }


        .button{
        padding: 5px 40px;
        border-radius: 5px;
        background: #019CDE;
        color: #fff;
        letter-spacing: 1px;
        display: inline-block;
        cursor: pointer;
        margin-left: 10px;
        }


        .text-center{
        text-align: center;
        }

        .text-confirm{
          font-size: 25px;
          text-align: center;
          padding-bottom: 15px;
        }


        .description-confirm{
          font-size: 15px;
        }


        .accept-confirm{
          height: 50px;
          width: 300px;
          margin-left: 10px;
          background-color: #fff;
          border-radius: 10px;
        }


        .accept-text{
          padding-top: 5px;
          color: #000;
        }


        #loading{
          width: 50px;
          height: 50px;
          border: 5px solid #ccc;
          border-top-color: #ff6a00;
          border-radius: 100%;
          animation: round 2s linear infinite;
        }

        @keyframes round{
          from{transform: rotate(0deg);}
          to{transform: rotate(360deg);}
        }


        .loading-text{
          color: #fff;
        }


        .loading-modal{
          text-align: center;
          padding-top: 80px;
        }


        .loading-circle{
        position: absolute;
        left: 0;
        right: 0;
        top: 50px;
        bottom: 0;
        margin: auto;
        }

        progress[value] {
          -webkit-appearance: none;
           appearance: none;

          width: 250px;
          height: 20px;
        }

        .hideMe {
            display: none;
        }
        #sampleModal{
         z-index: 9999
        }
         </style>

           <script>

    $("#btnEndStep1").click(function () {
        $("#step1").addClass('hideMe');
        $("#step2").removeClass('hideMe');
        start(0);
    });
    $("#btnEndStep2").click(function () {
        $("#step2").addClass('hideMe');
        $("#step3").removeClass('hideMe');
    });
    $("#btnEndStep3").click(function () {
        // Whatever your final validation and form submission requires
        $("#sampleModal").modal("hide");
    });

    function start(al) {
        var bar = document.getElementById('progressBar');
        var status = document.getElementById('status');
        bar.value = al;
        al++;
        var sim = setTimeout("start(" + al + ")", 100);
        if (al === 100) {
          bar.value = 100;
          clearTimeout(sim);

          console.log("end");
          $( "#btnEndStep2" ).click();

        }
    }


        </script>
相关问题
最新问题