1 <html>
2 <head>
3 <title>弹框</title>
4
5 <style>
6 .modalDialog {
7 position: fixed;
8 font-family: Arial, Helvetica, sans-serif;
9 top: 0;
10 right: 0;
11 bottom: 0;
12 left: 0;
13 background: rgba(0,0,0,0.4);
14 z-index: 99999;
15 opacity: 0;
16 -webkit-transition: opacity 400ms ease-in;
17 -moz-transition: opacity 400ms ease-in;
18 transition: opacity 400ms ease-in;
19 pointer-events: none;
20 }
21 .modalDialog:target {
22 opacity: 1;
23 pointer-events: auto;
24 }
25 .modalDialog > div {
26 width: 400px;
27 position: relative;
28 margin: 10% auto;
29 padding: 5px 20px 13px 20px;
30 border-radius: 10px;
31 background: #fff;
32 }
33 .close {
34 background: #606061;
35 color: #FFFFFF;
36 line-height: 25px;
37 position: absolute;
38 right: -12px;
39 text-align: center;
40 top: -10px;
41 width: 24px;
42 text-decoration: none;
43 font-weight: bold;
44 -webkit-border-radius: 12px;
45 -moz-border-radius: 12px;
46 border-radius: 12px;
47 -moz-box-shadow: 1px 1px 3px #000;
48 -webkit-box-shadow: 1px 1px 3px #000;
49 box-shadow: 1px 1px 3px #000;
50 }
51
52 .close:hover {
53 background: #e1e1e1;
54 }
55 </style>
56 </head>
57
58 <body>
59
60 <a href="#openModal">提示</a>
61
62 <div id="openModal" class="modalDialog">
63 <div>
64 <a href="#close" title="Close" class="close">X</a>
65 <h2>弹出窗口</h2>
66 <p>阿斯顿啊士大夫似的</p>
67
68 </div>
69 </div>
70
71
72 </body>
73 </html>
