这是我的代码
<!DOCTYPE html>
Title
<br> *{<br> margin: 0;<br> padding: 0;<br> }<br> html,body{<br> width: 100%;<br> height: 100%;</p> <pre><code> } .box{ width: 100px; height: 100px; background: #7e7e7e; } .modal{ width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,.3); top:0; left:0; } .on{ position: absolute; top: 50%; left: 50%; width: 250px; height: 150px; margin-left: -150px; margin-top: -100px; background: #FFFFFF; } p{ font-size: 18px; height: 50px; line-height: 50px; text-align:center; } button{ width: 100px; height: 50px; margin-left: 75px; margin-top: 10px; } </style> </code></pre> <p></head><br> <body></p> <div class="box"></div> <!------------------------------------------------- <div class="modal"> <div class="on"> <p class="pic">图片不清晰</p> <button>关闭</button> </div> </div> ---------------------------------------------------> <p></body></p> <script> var $modal = $( '<div class="modal">'+ '<div class="on">'+ '<p class="pic">图片不清晰</p>'+ '<button>关闭</button>'+ '</div>'+ '</div>' ); var $hide = $('.modal'); $('.box').click( function(){ $('body').append($modal); }); </script> <p></html></p>
