<div id=”widget-Lokki”>
<div
id=”popup-lokki”
style=”
display: none;
position: fixed;
z-index: 300000;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);”
>
<div
id=”popup-lokki-content”
style=”
height: 100%;
width: 100%;
position: fixed;
z-index: 100001;
top: 0;
left: 0;
overflow-x: hidden;
-webkit-transform:scale(.9, .9);”>
<span
id=”btn-close-lokki”
style=”
position: fixed;
top: 1px;
right: 30px;
font-size: 50px;
font-weight: 900;
cursor: pointer;
color: grey;”
>
&times;
</span>
<iframe
id=”lokki-frame”
style=”height: 100%; width: 100%; “
src=”{url_boutique_en_ligne}”
frameborder=”0″
marginheight=”0″
marginwidth=”0″
></iframe>
</div>
</div>
<div
style=”position: fixed;
bottom: 2rem;
right: 2rem;
width: 30%;
max-width: 200px;
min-width: 175px;
z-index: 100000;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 30px rgba(48, 35, 173, 0.15);
padding: 15px 20px;
text-align: center;
line-height: 24px;
display: flex;
justify-content: space-between;
flex-direction: column;
font-family: ‘Rubik’, ‘Helvetica’, ‘sans-serif'”
>
<span
style=”color: #8D8AAB;
font-weight: 500;
border-bottom: 1px solid #E9E7FA;
padding-bottom: 6px;font-size: 16px”> RESERVEZ EN LIGNE </span>
<p
id=”btn-open-lokki”
style=”width: 100%;
padding: 9px 0px;
border-radius: 5px;
box-shadow: rgba(48, 35, 173, 0.13) 2px 2px 6px 0px;
background-color: #3023ad;
border: none;
overflow: hidden;
text-decoration: none;
color: white;
font-weight: 500;
line-height: 20px;
font-size: 16px;
cursor: pointer;”
>
Location Vélo
</p>
</div>
<script>
document.getElementById(“btn-close-lokki”).addEventListener(“click”, function() {
document.getElementById(“popup-lokki”).style.display = “none”;
document.getElementById(“btn-close-lokki”).style.display = “none”;

});
document.getElementById(“btn-open-lokki”).addEventListener(“click”, () => {
document.getElementById(“popup-lokki”).style.display = “block”;
document.getElementById(“btn-close-lokki”).style.display = “block”;
});

window.onclick = function(event) {
if (event.target.id != “popup-lokki-content” && event.target.id != “btn-open-lokki”) {
document.getElementById(“popup-lokki”).style.display = “none”;
document.getElementById(“btn-close-lokki”).style.display = “none”;
}
}
</script>
</div>