pour un effet flou
« 2,3 lignes »
la totalité du code
<html>
<head>
<style>
.swapmenu2::-webkit-scrollbar {display: none; }
div.swapmenu2 {
background-color: transparent;
white-space: nowrap;
overflow-y: hidden;
display: block;
margin-left: auto;
margin-right: auto;
width: 85%;
}
div.swapmenu2 a {
padding: 15px;
text-decoration: none;
opacity: 1;
padding-top: 10px;
}
div.swapmenu2 a:hover {
text-decoration: none;
opacity: 0.7;
}
.swapmenu2 li {
display: inline-block;
list-style: none;
opacity: 1;
}
.swapmenu2 li>a {display: inline-block;}
.swapmenu2 img {
filter: drop-shadow(8px 6px 6px gray);
height:105px; /** taille des images **/
}
.dialogStyle .ui-dialog-titlebar-close {
display: none;
}
.dialogStyle .ui-dialog-titlebar {
font-family: "Roboto-Regular", cursive, sans-serif;
}
.blur-it {
-webkit-filter: blur(5px);
filter: blur(5px);
}
</style>
</head>
<body>
<div>
<div class="swapmenu2">
<!--
perso/design/portable/salon.png
https://raw.githubusercontent.com/ajja17/Design/master/image/salon.png
-->
<li><a data-title="Salon" data-src="/index.php?v=d&p=plan&plan_id=6&fullscreen=1">
<img src="https://raw.githubusercontent.com/ajja17/Design/master/image/salon.png"/>
</a>
</li>
<!--
perso/design/portable/salle_manger.png
https://raw.githubusercontent.com/ajja17/Design/master/image/salle_manger.png
-->
<li><a data-title="Salle à manger" data-src="/index.php?v=d&p=plan&plan_id=7&fullscreen=1">
<img src="https://raw.githubusercontent.com/ajja17/Design/master/image/salle_manger.png"/>
</a></li>
</div>
<script>
$(function () {
var modal= $('body > :not(.ui-dialog):not(.ui-widget-overlay');
var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
var dialog = $("<div class='modal'></div>").append(iframe).appendTo("body").dialog({
classes: {
"ui-dialog": "custom-dial"
},
autoOpen: false,
modal: true,
resizable: false,
width: "auto",
height: "auto",
resizable: false,
draggable: false,
dialogClass:"dialogStyle",
closeText: "fermer",
hide: { effect: "fade"},
show: { effect: "fade"},
closeOnEscape: true, // touche echap
buttons: [{
text: "Sortir",
click: function() {
iframe.attr("src", "");
$( this ).dialog( "close" );
modal.removeClass('blur-it');
}
}]
});
$("body").on("click",".ui-widget-overlay",function() {
$('.modal').dialog( "close" );
modal.removeClass('blur-it');
});
$(".swapmenu2 a").on("click", function () {
modal.toggleClass('blur-it');
var src = $(this).attr("data-src");
var title = $(this).attr("data-title");
iframe.attr({
width: 330,
height: 440,
src: src,
allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
});
dialog.dialog("option", "title", title).dialog("open");
});
});
</script>
</div>
</body></html>