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 115 116
| <!doctype html>
<!--[if lt IE 7 ]><html class="ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title>Modal Windows with HTML and CSS</title>
<link rel="stylesheet" href="_/css/style.css" />
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script src="/mint/?js"></script>
<style>
#wrap{
margin: 0 auto;
width: 600px;
padding: 40px 0;
}
/* modal wrapper */
#modal-outer{
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background: gray;
background: rgba(0, 0, 0, .5);
filter: alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#modal-outer:target {
display: block;
}
/* modal inner */
#modal{
width: 460px;
height: auto;
visibility: visible;
display: block;
/**/
z-index: 6000;
padding: 20px;
position: relative;
margin: 90px auto 40px;
overflow: visible;
background-color: white;
border: 1px solid #CCC 9;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .4),inset 0 1px 0 rgba(255, 255, 255, .5);
-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .4),inset 0 1px 0 rgba(255, 255, 255, .5);
box-shadow: 0 4px 12px rgba(0, 0, 0, .4),inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* modal close button */
#modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
font-size: 0px;
}
#modal a[href="#close"]:focus {
outline: none;
}
#modal a[href="#close"]:after {
content: 'X';
display: block;
position: absolute;
right: -16px;
top: -16px;
width: 20px;
height: 15px;
padding: 11px 7px 8px 7px;
text-decoration: none;
text-shadow: none;
text-align: center;
background: black;
color: white;
border: 3px solid white;
-moz-border-radius: 20px;
border-radius: 40px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
font-size: 12px;
font-weight: bold;
}
#modal a[href="#close"]:focus:after {
outline: 1px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<p><a id="click" href="#modal-outer">Voir mesure hygrométrie</a></p>
<div id="modal-outer">
<div id="modal">
<a href="#close" title="Close">Close</a>
</div>
</div>
</div>
</script>
</body>
</html> |
Partager