<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 ---------->
<style type="text/css">
.modal {
max-width: 900px;
}
.row {
margin-right: 10px;
margin-left: 10px;
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<p><a id="butt" style="cursor:pointer;">Open Modal</a></p>
<div id="ex1" style="display:none;" class="modal">
<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="row">
<a class="btn btn-info" rel="modal:close">Close</a>
</div>
</div>
<script>
jQuery(document).ready(function(){
$('#butt').click(function(){
$('#ex1').modal({
fadeDuration: 1000,
fadeDelay: 0.50,
escapeClose: false,
clickClose: false,
showClose: false
});
});
})
</script>
/*
A simple jQuery modal (http://github.com/kylefox/jquery-modal)
Version 0.8.0
*/
.blocker {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
overflow: auto;
z-index: 1;
padding: 20px;
box-sizing: border-box;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.75);
text-align: center;
}
.blocker:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em;
}
.blocker.behind {
background-color: transparent;
}
.modal {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 2;
max-width: 500px;
box-sizing: border-box;
width: 90%;
background: #fff;
padding: 15px 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
text-align: left;
}
.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAANjr9RwUqgAAACBjSFJNAABtmAAAc44AAPJxAACDbAAAg7sAANTIAAAx7AAAGbyeiMU/AAAG7ElEQVR42mJkwA8YoZjBwcGB6fPnz4w/fvxg/PnzJ2N6ejoLFxcX47Rp036B5Dk4OP7z8vL+P3DgwD+o3v9QjBUABBALHguZoJhZXV2dVUNDgxNIcwEtZnn27Nl/ZmZmQRYWFmag5c90dHQY5OXl/z98+PDn1atXv79+/foPUN9fIP4HxRgOAAggRhyWMoOwqKgoq6GhIZe3t7eYrq6uHBDb8/Pz27Gysloga/jz588FYGicPn/+/OapU6deOnXq1GdgqPwCOuA31AF/0S0HCCB0xAQNBU4FBQWB0NBQublz59oADV37Hw28ePHi74MHD/6ii3/8+HEFMGQUgQ6WEhQU5AeZBTWTCdkigABC9ylIAZeMjIxQTEyMysaNG/3+/v37AGTgr1+//s2cOfOXm5vbN6Caz8jY1NT0a29v76/v37//g6q9sHfv3khjY2M5YAgJgsyEmg0PYYAAQreUk4+PT8jd3V1l1apVgUAzfoIM2rlz5x9gHH5BtxAdA9PB1zNnzvyB+R6oLxoopgC1nBPZcoAAgiFQnLIDMb+enp5iV1eXBzDeHoI0z58//xcwIX0mZCkMg9S2trb+hFk+ffr0QCkpKVmQ2VA7QHYxAgQQzLesQMwjIiIilZWVZfPu3bstMJ+SYikyBmUzkBnA9HEMyNcCYgmQHVC7mAACCJagOEBBbGdnp7lgwYJEkIavX7/+BcY1SvAaGRl9tba2xohjMTGxL8nJyT+AWQsuxsbG9vnp06e/QWYdPHiwHmiWKlBcCGQXyNcAAQSzmBuoSQqYim3u37+/EKR48uTJv5ANB+bVr7Dga2xs/AkTV1JS+gq0AJyoQIkPWU9aWtoPkPibN2/2A/l6QCwJ9TULQADB4hcY//xKXl5eHt++fbsAUmxhYYHiM1DiAsr9R7ZcVVUVbikIdHd3/0TWIyws/AWYVsByAgICdkAxRSAWAGI2gACClV7C4uLiOv7+/lEgRZ8+ffqLLd6ABck3ZMuB6uCWrlu37je29HDx4kVwQisvL88FFqkaQDERUHADBBAomBl5eHiYgQmLE1hSgQQZgIUD1lJm69atf4HR8R1YKoH5QIPAWWP9+vV/gOI/gHkeQw+wGAXTwAJJ5t+/f/BUDRBA4NIEKMDMyMjICtQIiniG379/4yza7t69+//Lly8oDrty5co/bJaCAEwcZCkwwTJDLWYCCCCwxcDgY3z16hXDnTt3voP4EhISWA0BFgZMwNqHExh3jMiG1tbWsgHjnA2bHmAeBtdWwOL1MycnJ7wAAQggBmi+kgIW/OaKiorJwOLuFShO0LMSMPF9AUYBSpz6+vqixHlOTs4P9MIEWHaDsxSwYMoE2mEGFJcG5SKAAGJCqjv/AbPUn8ePH98ACQQHB6NUmZqamkzABIgSp5s3bwbHORCA1QDLAWZkPc7OzszA8oHl5cuXVy5duvQBGIXwWgoggGA+FgO6xkBNTS28r69vDrT2+Y1cIMDyJchX6KkXVEmAshd6KB06dAic94EO3AzkBwGxPhCLg8ptgACCZyeQp9jZ2b2AmsuAefM8tnxJCk5ISPgOLTKfAdNEOVDMA2QHLDsBBBC8AAFlbmCLwlZISCg5JSVlJizeQAaQaimoWAUFK0g/sGGwHiiWCMS2yAUIQAAxI7c4gEmeFZi4OJ48ecLMzc39CRiEmgEBASxA/QzA8vYvAxEgNjaWZc2aNezAsprp2LFjp4FpZRdQ+AkQvwLij0AMSoC/AQIIXklAC3AVUBoBxmE8sPXQAiyvN8J8fuPGjR/h4eHf0eMdhkENhOPHj8OT+NGjR88BxZuBOA5kJtRseCUBEECMSI0AdmgBDooDaaDl8sASTSkyMlKzpqZGU1paGlS7MABLrX83b978A6zwwakTmE0YgIkSnHpBfGCV+gxYh98qKSk5CeTeAxVeQPwUiN8AMSjxgdLNX4AAYkRqCLBAXcMHtVwSaLkMMMHJAvOq9IQJE9R8fHxElJWV1bEF8aNHj+7t27fvLTDlXwXGLyhoH0OD+DnU0k/QYAa1QP8BBBAjWsuSFWo5LzRYxKFYAljqiAHzqxCwIBEwMTERBdZeoOYMA7Bl+RFYEbwB5oS3IA9D4/IFEL+E4nfQ6IDFLTgvAwQQI5ZmLRtSsINSuyA0uwlBUyQPMPWD20/AKo8ByP4DTJTfgRgUjB+gFoEc8R6amGDB+wu5mQsQQIxYmrdMUJ+zQTM6NzQEeKGO4UJqOzFADQMZ/A1qCSzBfQXi71ALfyM17sEAIIAY8fQiWKAYFgIwzIbWTv4HjbdfUAf8RPLhH1icojfoAQKIEU8bG9kRyF0aRiz6YP0k5C4LsmUY9TtAADEyEA+IVfufGEUAAQYABejinPr4dLEAAAAASUVORK5CYII=") no-repeat 0 0;
}
.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url("data:image/gif;base64,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") #111 no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
/*
*
*/
.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;
}
/*
A simple jQuery modal (http://github.com/kylefox/jquery-modal)
Version 0.8.0
*/
(function (factory) {
// Making your jQuery plugin work better with npm tools
// http://blog.npmjs.org/post/112712169830/making-your-jquery-plugin-work-better-with-npm
if(typeof module === "object" && typeof module.exports === "object") {
factory(require("jquery"), window, document);
}
else {
factory(jQuery, window, document);
}
}(function($, window, document, undefined) {
var modals = [],
getCurrent = function() {
return modals.length ? modals[modals.length - 1] : null;
},
selectCurrent = function() {
var i,
selected = false;
for (i=modals.length-1; i>=0; i--) {
if (modals[i].$blocker) {
modals[i].$blocker.toggleClass('current',!selected).toggleClass('behind',selected);
selected = true;
}
}
};
$.modal = function(el, options) {
var remove, target;
this.$body = $('body');
this.options = $.extend({}, $.modal.defaults, options);
this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
this.$blocker = null;
if (this.options.closeExisting)
while ($.modal.isActive())
$.modal.close(); // Close any open modals.
modals.push(this);
if (el.is('a')) {
target = el.attr('href');
//Select element by id from href
if (/^#/.test(target)) {
this.$elm = $(target);
if (this.$elm.length !== 1) return null;
this.$body.append(this.$elm);
this.open();
//AJAX
} else {
this.$elm = $('<div>');
this.$body.append(this.$elm);
remove = function(event, modal) { modal.elm.remove(); };
this.showSpinner();
el.trigger($.modal.AJAX_SEND);
$.get(target).done(function(html) {
if (!$.modal.isActive()) return;
el.trigger($.modal.AJAX_SUCCESS);
var current = getCurrent();
current.$elm.empty().append(html).on($.modal.CLOSE, remove);
current.hideSpinner();
current.open();
el.trigger($.modal.AJAX_COMPLETE);
}).fail(function() {
el.trigger($.modal.AJAX_FAIL);
var current = getCurrent();
current.hideSpinner();
modals.pop(); // remove expected modal from the list
el.trigger($.modal.AJAX_COMPLETE);
});
}
} else {
this.$elm = el;
this.$body.append(this.$elm);
this.open();
}
};
$.modal.prototype = {
constructor: $.modal,
open: function() {
var m = this;
this.block();
if(this.options.doFade) {
setTimeout(function() {
m.show();
}, this.options.fadeDuration * this.options.fadeDelay);
} else {
this.show();
}
$(document).off('keydown.modal').on('keydown.modal', function(event) {
var current = getCurrent();
if (event.which == 27 && current.options.escapeClose) current.close();
});
if (this.options.clickClose)
this.$blocker.click(function(e) {
if (e.target==this)
$.modal.close();
});
},
close: function() {
modals.pop();
this.unblock();
this.hide();
if (!$.modal.isActive())
$(document).off('keydown.modal');
},
block: function() {
this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
this.$body.css('overflow','hidden');
this.$blocker = $('<div class="jquery-modal blocker current"></div>').appendTo(this.$body);
selectCurrent();
if(this.options.doFade) {
this.$blocker.css('opacity',0).animate({opacity: 1}, this.options.fadeDuration);
}
this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
},
unblock: function(now) {
if (!now && this.options.doFade)
this.$blocker.fadeOut(this.options.fadeDuration, this.unblock.bind(this,true));
else {
this.$blocker.children().appendTo(this.$body);
this.$blocker.remove();
this.$blocker = null;
selectCurrent();
if (!$.modal.isActive())
this.$body.css('overflow','');
}
},
show: function() {
this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
if (this.options.showClose) {
this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
this.$elm.append(this.closeButton);
}
this.$elm.addClass(this.options.modalClass).appendTo(this.$blocker);
if(this.options.doFade) {
this.$elm.css('opacity',0).show().animate({opacity: 1}, this.options.fadeDuration);
} else {
this.$elm.show();
}
this.$elm.trigger($.modal.OPEN, [this._ctx()]);
},
hide: function() {
this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
if (this.closeButton) this.closeButton.remove();
var _this = this;
if(this.options.doFade) {
this.$elm.fadeOut(this.options.fadeDuration, function () {
_this.$elm.trigger($.modal.AFTER_CLOSE, [_this._ctx()]);
});
} else {
this.$elm.hide(0, function () {
_this.$elm.trigger($.modal.AFTER_CLOSE, [_this._ctx()]);
});
}
this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
},
showSpinner: function() {
if (!this.options.showSpinner) return;
this.spinner = this.spinner || $('<div class="' + this.options.modalClass + '-spinner"></div>')
.append(this.options.spinnerHtml);
this.$body.append(this.spinner);
this.spinner.show();
},
hideSpinner: function() {
if (this.spinner) this.spinner.remove();
},
//Return context for custom events
_ctx: function() {
return { elm: this.$elm, $blocker: this.$blocker, options: this.options };
}
};
$.modal.close = function(event) {
if (!$.modal.isActive()) return;
if (event) event.preventDefault();
var current = getCurrent();
current.close();
return current.$elm;
};
// Returns if there currently is an active modal
$.modal.isActive = function () {
return modals.length > 0;
}
$.modal.getCurrent = getCurrent;
$.modal.defaults = {
closeExisting: true,
escapeClose: true,
clickClose: true,
closeText: 'Close',
closeClass: '',
modalClass: "modal",
spinnerHtml: null,
showSpinner: true,
showClose: true,
fadeDuration: null, // Number of milliseconds the fade animation takes.
fadeDelay: 1.0 // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
};
// Event constants
$.modal.BEFORE_BLOCK = 'modal:before-block';
$.modal.BLOCK = 'modal:block';
$.modal.BEFORE_OPEN = 'modal:before-open';
$.modal.OPEN = 'modal:open';
$.modal.BEFORE_CLOSE = 'modal:before-close';
$.modal.CLOSE = 'modal:close';
$.modal.AFTER_CLOSE = 'modal:after-close';
$.modal.AJAX_SEND = 'modal:ajax:send';
$.modal.AJAX_SUCCESS = 'modal:ajax:success';
$.modal.AJAX_FAIL = 'modal:ajax:fail';
$.modal.AJAX_COMPLETE = 'modal:ajax:complete';
$.fn.modal = function(options){
if (this.length === 1) {
new $.modal(this, options);
}
return this;
};
// Automatically bind links with rel="modal:close" to, well, close the modal.
$(document).on('click.modal', 'a[rel~="modal:close"]', $.modal.close);
$(document).on('click.modal', 'a[rel~="modal:open"]', function(event) {
event.preventDefault();
$(this).modal();
});
}));
/*
*
*/
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");
}
