-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (96 loc) · 5.35 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Cotizador</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="nav-top">
<div class="container">
<div class="row">
<div class="titulo">Movimientos de Suelo Pilar SRL</div>
</div>
</div>
</nav>
<div class="contenedor-main">
<div class="campo">
<div class="dot boton-acceso" tipo-contenido="aridos" data-toggle="modal" data-target="#infoModal" style="top: 42%; left: 20%;"><div class="pulsar"></div><div class="numero" >1</div></div>
<div class="dot boton-acceso" tipo-contenido="camiones" data-toggle="modal" data-target="#infoModal" style="top: 10%;left: 50%;"><div class="pulsar"></div><div class="numero">2</div></div>
<div class="dot boton-acceso" tipo-contenido="maquinas" data-toggle="modal" data-target="#infoModal" style="top: 14%; left: 72%;"><div class="pulsar"></div><div class="numero">3</div></div>
<div class="dot boton-acceso" tipo-contenido="suelos" data-toggle="modal" data-target="#infoModal" style="top: 33%;left: 51%;"><div class="pulsar"></div><div class="numero">4</div></div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom barra-abajo">
<div class="container">
<div class="row" id="botones">
<div class="col-md-3 ">
<div class="caja boton-acceso" tipo-contenido="aridos" data-toggle="modal" data-target="#infoModal">Venta de aridos</div>
</div>
<div class="col-md-3">
<div class="caja boton-acceso" tipo-contenido="camiones" data-toggle="modal" data-target="#infoModal">Alquiler de camiones</div>
</div>
<div class="col-md-3">
<div class="caja boton-acceso" tipo-contenido="maquinas" data-toggle="modal" data-target="#infoModal">Alquiler de Maquinas</div>
</div>
<div class="col-md-3">
<div class="caja boton-acceso" tipo-contenido="suelos" data-toggle="modal" data-target="#infoModal">Movimiento de suelos</div>
</div>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[tipo-contenido]').click(function(){
console.log('Click en boton!');
$('.modal .modal-body').html('Se cargo el elemento:'+$(this).attr("tipo-contenido"));
});
$('#infoModal').on('show.bs.modal', function (e) {
console.log("Modal open!");
$('.campo').addClass('blur');
$('#botones').addClass('blur');
$('#nav-top').addClass('blur');
});
$('#infoModal').on('hidden.bs.modal',function(e){
console.log("Modal close!");
$('.campo').removeClass('blur');
$('#botones').removeClass('blur');
$('#nav-top').removeClass('blur');
});
});
</script>
</body>
</html>