[关闭]
@xunuo 2018-08-10T11:06:23.000000Z 字数 1336 阅读 941

弹窗

前端


  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
  6. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  7. <script src="easyui/jquery.min.js" type="text/javascript"></script>
  8. <script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
  9. <style type="text/css">
  10. </style>
  11. <script type="text/javascript">
  12. window.onload = function() {
  13. var onbtn = document.getElementById('btn');
  14. var onDelete = document.getElementById('delete');
  15. var onInfo = document.getElementById('info-box');
  16. var onCover = document.getElementById('background-cover');
  17. onbtn.onclick = function() {
  18. onInfo.style.display = 'block';
  19. onCover.style.display = 'block';
  20. onInfo.style.zIndex = 1;
  21. };
  22. onDelete.onclick=function(){
  23. onInfo.style.display='none';
  24. onCover.style.display='none';
  25. }
  26. $('#delete').linkbutton({
  27. iconCls: 'icon-no'
  28. });
  29. }
  30. </script>
  31. </head>
  32. <body>
  33. <div>
  34. <button id="btn">click me</button>
  35. </div>
  36. <div id="info-box" style="position:absolute; width:400px;height:400px;margin: 500px 500px;display: none;">
  37. <div id="box-header" style="width:400px;height:50px;background-color:#FFFFFF;text-align: center;">
  38. hello
  39. <a id="delete" style="float: right;"></a>
  40. </div>
  41. <div id="box-content">
  42. hi
  43. </div>
  44. </div>
  45. <div id="background-cover" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #000;opacity: 0.5;display: none;"></div>
  46. </body>
  47. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注