offtopic/punti-solidali
3
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

aggiunta modale per info

Browse source
This commit is contained in:
mandria 2020-04-22 21:43:59 +02:00
parent 2432a20dfb
commit 6052bed844
4 changed files with 86 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
bootstrap.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

31
index.html
View file

@ -8,6 +8,7 @@
/>
<title>Mappa Punti Solidali Milano</title>
<link rel="stylesheet" href="style-ps.css" />
<link rel="stylesheet" href="bootstrap.min.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap"
rel="stylesheet"
@ -50,11 +51,32 @@
/>
</head>
<body>
<iframe
<iframe
style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:10;"
allowfullscreen
src="//umap.openstreetmap.fr/en/map/mappapuntisolidali_440667?scaleControl=false&miniMap=false&scrollWheelZoom=true&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=undefined&captionBar=false"
></iframe>
<div id="info">
<a href="javascript:;"><img class="js-static-modal-toggle" src="https://img.icons8.com/material-two-tone/48/000000/info--v1.png"/> </a>
</div>
<!-- Modale -->
<div id="static-modal" class="modal" tabindex="-1" role="dialog">
<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">×</span></button>
<h4 class="modal-title">Inforrmazioni e segnalazioni</h4>
</div>
<div class="modal-body">
<p>Per segnalazioni scrivere a: mappapuntisolidali@inventati.org</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modale FIne -->
<div id="footer" style="z-index:50;">
<ul id="legenda">
<li>
@ -99,5 +121,12 @@
</li>
</ul>
</div>
<script src="lib/modal.min.js"></script>
<script>
document.querySelector('.js-static-modal-toggle').addEventListener('click', function() {
console.log('puupameLO DAVVERO');
new Modal({el: document.getElementById('static-modal')}).show();
});
</script>
</body>
</html>

1
lib/modal.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

49
style-ps.css
View file

@ -47,4 +47,53 @@ ul > li {
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
#info {
z-index: 60;
position: absolute;
right: 0px;
}
/**************************\
Basic Modal Styles
\**************************/
.modal-backdrop {
opacity: 0.5;
}
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInDown .modal-dialog {
animation-duration: .75s;
animation-fill-mode: both;
animation-name: slideInDown;
}
@keyframes slideOutUp {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp .modal-dialog {
animation-duration: .75s;
animation-fill-mode: both;
animation-name: slideOutUp;
}