Merge pull request #168 from HenryGBC/feature/new_digitalglarus
Add modal success
This commit is contained in:
Levi Velázquez
GitHub
commit
942b8a524e
5 changed files with 102 additions and 62 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1,55 +1,55 @@
|
||||||
(function($){
|
(function($){
|
||||||
'use strict'; // Start of use strict
|
'use strict'; // Start of use strict
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
|
verifiedUrl();
|
||||||
init_options_interested();
|
init_options_interested();
|
||||||
init_nav();
|
init_nav();
|
||||||
change_values();
|
change_values();
|
||||||
form_submit();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function verifiedUrl(){
|
||||||
|
if(window.location.href.indexOf('#success') > -1){
|
||||||
|
form_success();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function init_options_interested(){
|
function init_options_interested(){
|
||||||
$('.row-vms').click(function(){
|
$('.row-vms').click(function(){
|
||||||
$('.row-vms').removeClass('row-vms__active');
|
$('.row-vms').removeClass('row-vms__active');
|
||||||
$(this).addClass('row-vms__active');
|
$(this).addClass('row-vms__active');
|
||||||
var number = $('.row-vms__active input').val();
|
var number = $('.row-vms__active input').val();
|
||||||
var price = $('.row-vms__active input').data('price');
|
var price = $('.row-vms__active input').data('price');
|
||||||
_calculate(number, price);
|
_calculate(number, price);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function init_nav(){
|
function init_nav(){
|
||||||
|
|
||||||
$('.nav-local').click(function(){
|
$('.nav-local').click(function(){
|
||||||
$('html, body').animate({
|
$('html, body').animate({
|
||||||
scrollTop: $('#'+$(this).data('href')).offset().top
|
scrollTop: $('#'+$(this).data('href')).offset().top
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function change_values(){
|
function change_values(){
|
||||||
$('.number-vms').keyup(function () {
|
$('.number-vms').keyup(function () {
|
||||||
var number = $(this).val();
|
var number = $(this).val();
|
||||||
var price = $(this).data('price');
|
var price = $(this).data('price');
|
||||||
_calculate(number, price);
|
_calculate(number, price);
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
function form_submit(){
|
function form_success(){
|
||||||
// $('#submit').click(function(){
|
$('#sucessModal').modal('show');
|
||||||
// $('.contain-form').fadeOut();
|
}
|
||||||
// $('.loading').fadeIn();
|
|
||||||
// setTimeout(function(){
|
|
||||||
// $('.loading').fadeOut();
|
|
||||||
// $('.succes-message').fadeIn();
|
|
||||||
// }, 3000);
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
function _calculate(numbers, price){
|
function _calculate(numbers, price){
|
||||||
$('#valueTotal').text(numbers*price*31);
|
$('#valueTotal').text(numbers*price*31);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
})(jQuery); // End of use strict
|
})(jQuery); // End of use strict
|
||||||
|
|
|
||||||
1
datacenterlight/static/datacenterlight/js/plugin.js
Normal file
1
datacenterlight/static/datacenterlight/js/plugin.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -8,6 +8,7 @@
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||||
<title>landings</title>
|
<title>landings</title>
|
||||||
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
||||||
|
<link rel="shortcut icon" href="{% static 'datacenterlight/img/favicon.ico' %}" type="image/x-icon" />
|
||||||
<link rel="stylesheet" href="{% static 'datacenterlight/css/main.css' %}">
|
<link rel="stylesheet" href="{% static 'datacenterlight/css/main.css' %}">
|
||||||
<script src="{% static 'datacenterlight/js/vendor/modernizr.js' %}"></script>
|
<script src="{% static 'datacenterlight/js/vendor/modernizr.js' %}"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -61,16 +62,31 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="loading"><img src="{% static 'datacenterlight/img/loading.gif' %}" alt=""></div>
|
|
||||||
<div class="succes-message">
|
|
||||||
<div class="title">
|
|
||||||
<h1>Thank You</h1></div>
|
|
||||||
<div class="container" style="margin-top:3rem">
|
|
||||||
<p>Thanks for letting us know about your interest! We will come back to you as soon as our beta program starts!</p>
|
|
||||||
<p>Meanwhile, you can checkout news about it on <a href="#">Twitter</a>, <a href="#">Facebook</a> and <a href="#">Instagram</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
<div class="modal fade" id="sucessModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLongTitle">Thank You</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="success-message">
|
||||||
|
<div class="title">
|
||||||
|
<h1>Thank You</h1>
|
||||||
|
</div>
|
||||||
|
<div class="container" style="margin-top: 3rem">
|
||||||
|
<p>Thanks for letting us know about your interest! We will come back to you as soon as our beta program starts!</p>
|
||||||
|
<p>Meanwhile, you can checkout news about it on <a href="#" >Twitter</a>, <a href="#" >Facebook</a> and <a href="#" >Instagram</a> </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
! function(e, t, a, n, c, o) {
|
! function(e, t, a, n, c, o) {
|
||||||
e.GoogleAnalyticsObject = n, e[n] || (e[n] = function() {
|
e.GoogleAnalyticsObject = n, e[n] || (e[n] = function() {
|
||||||
|
|
@ -79,6 +95,7 @@
|
||||||
}(window, document, "script", "ga"), ga("create", "UA-XXXXX-X"), ga("send", "pageview")
|
}(window, document, "script", "ga"), ga("create", "UA-XXXXX-X"), ga("send", "pageview")
|
||||||
</script>
|
</script>
|
||||||
<script src="{% static 'datacenterlight/js/vendor.js' %}"></script>
|
<script src="{% static 'datacenterlight/js/vendor.js' %}"></script>
|
||||||
|
<script src="{% static 'datacenterlight/js/plugin.js' %}"></script>
|
||||||
<script src="{% static 'datacenterlight/js/main.js' %}"></script>
|
<script src="{% static 'datacenterlight/js/main.js' %}"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
<title>landings</title>
|
<title>landings</title>
|
||||||
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
||||||
<link rel="stylesheet" href="{% static 'datacenterlight/css/main.css' %}">
|
<link rel="stylesheet" href="{% static 'datacenterlight/css/main.css' %}">
|
||||||
|
<link rel="shortcut icon" href="{% static 'datacenterlight/img/favicon.ico' %}" type="image/x-icon" />
|
||||||
<script src="{% static 'datacenterlight/js/vendor/modernizr.js' %}"></script>
|
<script src="{% static 'datacenterlight/js/vendor/modernizr.js' %}"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -26,30 +27,50 @@
|
||||||
<div class="form-interested">
|
<div class="form-interested">
|
||||||
<h2>Details about the offer..<ul><li><span>2 GB RAM</span></li><li><span>1 CPU</span></li><li><span>10 GB Dus</span></li></ul><h2>I am interested in running</h2>
|
<h2>Details about the offer..<ul><li><span>2 GB RAM</span></li><li><span>1 CPU</span></li><li><span>10 GB Dus</span></li></ul><h2>I am interested in running</h2>
|
||||||
<form action="">
|
<form action="">
|
||||||
<div class="row-vms d-flex align-items-center justify-content-between row-vms__active">
|
<div class="row-vms d-flex align-items-center justify-content-between row-vms__active">
|
||||||
<div class="form-group">
|
<div class="form-group ">
|
||||||
<input type="number" class="form-control number-vms" value="1" data-price="0.5">
|
<input type="number" class="form-control number-vms" value='1' data-price="0.5">
|
||||||
<div class="text"><span>number of VMs</span></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="submit">
|
<div class="text text__landing">
|
||||||
<button type="button" id="submit" class="btn btn-block btn-success">Submit</button>
|
<span>number of VMs </span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group form-group__email">
|
||||||
|
<input class="form-control" type="email" placeholder="email" id="example-email-input">
|
||||||
|
</div>
|
||||||
|
<div class="submit">
|
||||||
|
<button type="button" id="submit" class="btn btn-block btn-success">Submit</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>Interested in other offers? <a href="index.html">Checkout our beta program offers!</a></p>
|
<p >Interested in other offers? <a href="index.html">Checkout our beta program offers!</a></p>
|
||||||
</form>
|
</form>
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="loading"><img src="{% static 'datacenterlight/img/loading.gif' %}" alt=""></div>
|
|
||||||
<div class="succes-message">
|
|
||||||
<div class="title">
|
|
||||||
<h1>Thank You</h1></div>
|
|
||||||
<div class="container" style="margin-top:3rem">
|
|
||||||
<p>Thanks for letting us know about your interest! We will come back to you as soon as our beta program starts!</p>
|
|
||||||
<p>Meanwhile, you can checkout news about it on <a href="#">Twitter</a>, <a href="#">Facebook</a> and <a href="#">Instagram</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
<div class="modal fade" id="sucessModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLongTitle">Thank You</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="success-message">
|
||||||
|
<div class="title">
|
||||||
|
<h1>Thank You</h1>
|
||||||
|
</div>
|
||||||
|
<div class="container" style="margin-top: 3rem">
|
||||||
|
<p>Thanks for letting us know about your interest! We will come back to you as soon as our beta program starts!</p>
|
||||||
|
<p>Meanwhile, you can checkout news about it on <a href="#" >Twitter</a>, <a href="#" >Facebook</a> and <a href="#" >Instagram</a> </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
! function(e, t, a, n, c, o) {
|
! function(e, t, a, n, c, o) {
|
||||||
e.GoogleAnalyticsObject = n, e[n] || (e[n] = function() {
|
e.GoogleAnalyticsObject = n, e[n] || (e[n] = function() {
|
||||||
|
|
@ -58,6 +79,7 @@
|
||||||
}(window, document, "script", "ga"), ga("create", "UA-XXXXX-X"), ga("send", "pageview")
|
}(window, document, "script", "ga"), ga("create", "UA-XXXXX-X"), ga("send", "pageview")
|
||||||
</script>
|
</script>
|
||||||
<script src="{% static 'datacenterlight/js/vendor.js' %}"></script>
|
<script src="{% static 'datacenterlight/js/vendor.js' %}"></script>
|
||||||
|
<script src="{% static 'datacenterlight/js/plugin.js' %}"></script>
|
||||||
<script src="{% static 'datacenterlight/js/main.js' %}"></script>
|
<script src="{% static 'datacenterlight/js/main.js' %}"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue