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>
