<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>well done!</title> </head> <script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script> <style type="text/css"> .tip { position: absolute; right: 10px; bottom: 5px; width: 100px; height: 50px; border-radius: 18px; background-color: green; cursor: pointer; } .mask { position: fixed; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; display: none; background-color: gray; z-index: 10; padding: 10px auto; } .mask:after { position: fixed; right: 5px; top: 5px; content: "X"; color: lawngreen; } .container { width: 400px; height: 200px; background-color: antiquewhite; margin: 50px auto; overflow: scroll; } .item { position: relative; width: 180px; height: 100px; background-color: chocolate; float: left; } .pannel { clear: both; margin: 10px 5px 5px 10px;; background-color: coral; float: left; } .pannel div { float: left; color: chartreuse; } </style> <body> <div class="tip"></div> <div class="mask"> <div class="container"> <div class="item"> <div class="pannel"> <div>预览</div> <div>删除</div> <div>编辑</div> </div> </div> <div class="item"> <div class="pannel"> <div>预览</div> <div>删除</div> <div>编辑</div> </div> </div> <div class="item"> <div class="pannel"> <div>预览</div> <div>删除</div> <div>编辑</div> </div> </div> <div class="item"> <div class="pannel"> <div>预览</div> <div>删除</div> <div>编辑</div> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $(".tip").click(function () { $(".mask").css("display", "block"); }); }); </script> <script> for (var i = 0; i < 1000; i++) { document.write("<br>"); } </script> </body> </html>