<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<a data-toggle="modal" data-target="#myModal" style="cursor: pointer;">Click me !</a>
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div align="center" style="padding-bottom:50px;"><h1>How It Works</h1></div>
</div>
<div class="row">
<div class="progress" id="progress1">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
<span class="progress-type">Overall Progress</span>
<span class="progress-completed">0%</span>
</div>
</div>
<div class="row">
<div class="row step">
<div style="padding-top: 4px;" id="div1" class="col-md-2 activestep" onclick="javascript: resetActive(event, 0, 'step-1');">
<span><img src="http://rahsiaimportchina.com/wp/wp-content/uploads/2015/10/logo-2.png"></span>
<p>RICH Members</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 10, 'step-2');">
<span class="fa fa-pencil"></span>
<p>Register</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 20, 'step-3');">
<span class="fa fa-qrcode"></span>
<p>Shipping Code</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 30, 'step-4');">
<span class="fa fa-shopping-bag"></span>
<p>Purchase</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 40, 'step-5');">
<span class="fa fa-cube"></span>
<p>Create Parcel</p>
</div>
<div id="last" class="col-md-2" onclick="javascript: resetActive(event, 50, 'step-6');">
<span class="fa fa-plus-square-o"></span>
<p>Extra Services</p>
</div>
</div>
<div class="row step">
<div id="last" class="col-md-2" onclick="javascript: resetActive(event, 60, 'step-7');">
<span class="fa fa-cubes"></span>
<p>Create Shipment</p>
</div>
<div id="last" class="col-md-2" onclick="javascript: resetActive(event, 80, 'step-8');">
<span class="fa fa-tag"></span>
<p>Tracking Number</p>
</div>
<div id="last" class="col-md-2" onclick="javascript: resetActive(event, 100, 'step-9');">
<span class="fa fa-star"></span>
<p>Done</p>
</div>
</div>
</div>
<div class="row setup-content step activeStepInfo" id="step-1">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 1</h1>
<h3 class="underline">Instructions</h3>
Firstly before you are able to register with our service, your should be a member of closed group Rahsia Import China (RICH).<br>
If you are not a member yet, please proceed for registration on RICH website by clicking the image below.<br>
<div style="margin-top:10px;"><a href="http://rahsiaimportchina.com" target="_blank"><img src="http://i67.tinypic.com/10cksk8.jpg" width=640 height=297></a></div>
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-2">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 2</h1>
<h3 class="underline">Instructions</h3>
<span style="color: #FF0000;">Note: Only RICH members are allowed to register with Ezicargo</span><br>
Members of RICH can proceed to registration at this <a href="/register" target="_self">link</a>. We will check every new registration against RICH registration list.
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-3">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 3</h1>
<h3 class="underline">Instructions</h3>
User will be given an shipping CODE = Shipping mark identification number.<br>
Shipping code (Ezi ID) only will be given after registration fee is paid.
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-4">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 4</h1>
<h3 class="underline">Instructions</h3>
<p>Purchase online/offline from anywhere/anyplace/anyweb in China.<br>
Make sure give your Ezi ID as your name if you make a purchase or register any China's ecommerce website . Now your name is changed to your Ezi ID.</p>
<p>Ezicargo warehouse address should be given to seller/supplier as your shipping address either you purchase online or offline from China's seller.</p>
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-5">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 5</h1>
<h3 class="underline">Instructions</h3>
Create your parcel in our system after you made purchases.<br>
Your parcel will be waiting in the system until the goods are arrived at our warehouse in China.
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-6">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 6</h1>
<h3 class="underline">Instructions</h3>
Select From many services provided by Ezicargo to ensure your products are correct and your parcel is in good shape for shipment.
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-7">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 7</h1>
<h3 class="underline">Instructions</h3>
Create your shipments individually or combine several parcels together and shipout at once.
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-8">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 8</h1>
<h3 class="underline">Instructions</h3>
Receive your tracking number after 1 day and your goods after 4-7days.<br>
Tracking number only be given for Air Freight service only. Sea Freight has no tracking number, receive your goods after 14-21 days.
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-9">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 9</h1>
<h3 class="underline">Instructions</h3>
Finally sit back and relax, your goods are on its way.
If your membership is still active, the flow is repeat from step 4 to 9.
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
.row {
margin-right: 15px;
margin-left: 15px;
}
@media (min-width: 768px){
.modal-dialog {
width: 900px;
}
}
.hiddenStepInfo {
display: none;
}
.activeStepInfo {
display: block !important;
}
.underline {
text-decoration: underline;
}
.step {
margin-top: 27px;
}
.progress {
position: relative;
height: 25px;
}
.progress > .progress-type {
position: absolute;
left: 0px;
font-weight: 800;
padding: 3px 30px 2px 10px;
color: rgb(255, 255, 255);
background-color: rgba(25, 25, 25, 0.2);
}
.progress > .progress-completed {
position: absolute;
right: 0px;
font-weight: 800;
padding: 3px 10px 2px;
}
.step {
text-align: center;
}
.step .col-md-2 {
background-color: #fff;
border: 1px solid #C0C0C0;
border-right: none;
}
.step .col-md-2:last-child {
border: 1px solid #C0C0C0;
}
.step .col-md-2:first-child {
border-radius: 5px 0 0 5px;
}
.step .col-md-2:last-child {
border-radius: 0 5px 5px 0;
}
.step .col-md-2:hover {
color: #428BCA;
cursor: pointer;
}
.step .activestep {
color: #428BCA;
height: 100px;
margin-top: -7px;
padding-top: 7px;
border-left: 6px solid #FF0000 !important;
border-right: 6px solid #FF0000 !important;
border-top: 3px solid #FF0000 !important;
border-bottom: 3px solid #FF0000 !important;
vertical-align: central;
}
.step .fa {
padding-top: 15px;
font-size: 40px;
}
$('#myModal').on('shown.bs.loaded');
function resetActive(event, percent, step) {
$(".progress-bar").css("width", percent + "%").attr("aria-valuenow", percent);
$(".progress-completed").text(percent + "%");
$("div").each(function () {
if ($(this).hasClass("activestep")) {
$(this).removeClass("activestep");
}
});
if (event.target.className == "col-md-2") {
$(event.target).addClass("activestep");
}
else {
$(event.target.parentNode).addClass("activestep");
}
hideSteps();
showCurrentStepInfo(step);
}
function hideSteps() {
$("div").each(function () {
if ($(this).hasClass("activeStepInfo")) {
$(this).removeClass("activeStepInfo");
$(this).addClass("hiddenStepInfo");
}
});
}
function showCurrentStepInfo(step) {
var id = "#" + step;
$(id).addClass("activeStepInfo");
}
