设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 12|回复: 0

[javascript] html,CSS,javascript 做一个弹窗

[复制链接]
发表于 7 天前 | 显示全部楼层 |阅读模式

弹窗的工作原理:在网页中写一个div ,布局到想要显示的位置,将display设为none,隐藏该div。然后通过点击事件或其他操作,利用Js代码,将display设置为block,将div 显示到网页中。
Tips:display:none//隐藏 display: block//显示
效果图:点击弹出一个弹窗按钮,显示弹窗内容

代码:
  1. <!doctype html > <
  2. html > <
  3. head > <
  4. title >弹窗练习 </title > <
  5. meta charset="utf-8" > <
  6. style >
  7. .btn-pop{
  8. background-color:#ffd475; border-radius:10px;
  9. border:0px;
  10. zoom:200%;
  11. }
  12. #background-pop{
  13. display:none;
  14. position:fixed;
  15. left:0;
  16. top:0;
  17. width:100%;
  18. height:100%;
  19. background-color:rgba(0,0,0,0.5); }
  20. #div-pop{
  21. background:#ffffff;
  22. width:30%;
  23. z-index:1;
  24. margin:12% auto;
  25. overflow:auto; }
  26. .div-top{
  27. width:100%;
  28. height:auto;
  29. background-color:#28a3e7;
  30. color:#ffffff; }
  31. .div-top div{
  32. padding:3px 5px 5px 8px; }
  33. span{
  34. color:white;
  35. margin-bottom:10px ;
  36. margin-left:20px ;
  37. cursor:pointer;
  38. float:right; }
  39. .div-content{
  40. width:auto;
  41. height:200px;
  42. overflow:auto; }
  43. .div-footer{
  44. text-align:center;
  45. background-color:darkgray; } </style > </head > <
  46. body > <
  47. button class="btn-pop"onclick="show()" >弹出一个窗口 </button > <
  48. div id="background-pop" > <
  49. div id="div-pop" > <
  50. div class="div-top" > <
  51. span id="close-button" >× </span > <
  52. div >弹窗顶部(可以写个标题) </div > </div > <
  53. div class="div-content" >
  54. 放点内容进来 <
  55. br >
  56. 点击灰色位置和右上角x关闭弹窗  </div > <
  57. div class="div-footer" >
  58. 底部内容  </div > </div > </div > </body > <
  59. script > vardiv =document.getElementById('background-pop');varclose =document.getElementById('close-button');functionshow(){ div.style.display ="block"; } close.onclick =functionclose() { div.style.display ="none"; } window.onclick =functionclose(e) {if(e.target ==div) { div.style.display ="none"; } }
  60. </script > </html >
复制代码
代码:内容同上,多加了详细注释
  1. <!doctype html > <html > <head > <title >弹窗练习 </title > <meta charset="utf-8" > <style > <!-- css样式 -- > .btn-pop{ <!-- class选择器btn-pop添加样式 -- > background-color: #ffd475; <!-- 设置背景颜色 -- > border-radius: 10px; <!-- 按钮设置个圆角 -- > border:0px; <!-- 去掉边框 -- > zoom:200%; <!-- 按钮变大两倍 -- >
  2. } #background-pop{ <!-- id选择器background-pop添加样式 -- > display: none; <!-- 设置隐藏 -- > position: fixed; <!-- 相对于浏览器窗口的绝对定位,absolute 相对于屏幕 -- > left: 0; <!-- 窗口距离右端 -- > top: 0; <!-- 窗口距离顶部 -- > width: 100%; <!-- 宽 100% 填充整个窗口 -- > height: 100%; <!-- 高 -- > background-color: rgba(0,0,0,0.5); <!-- 设置北京颜色(red,green,blue alpha) -- > } #div-pop{ <!-- id选择器 -- > background:#ffffff; <!-- 背景色 -- > width:30%; <!-- 宽 -- > z-index: 1; <!-- 设置堆叠顺序,参数大的在前,默认为0 -- > margin: 12% auto; <!-- 外边距 -- > overflow: auto; <!-- 超过设置大小固定时,超过时,以滚动条显示 -- > } .div-top{ <!-- class选择器div-top -- > width: 100%; <!-- 宽 -- > height: auto; <!-- 高 默认高度随内部元素高度变化 -- > background-color: #28a3e7; <!-- 背景颜色 -- > color: #ffffff; <!-- 字体颜色 -- > } .div-top div{ <!-- class选择器div-top 中的div设置样式 -- > padding: 3px 5px 5px 8px; <!-- 内边距 :上 右 下 左, -- > } span{ <!-- span标签添加样式 -- > color: white; <!-- 颜色 -- > margin-bottom: 10px ; <!-- 底部外边距 -- > margin-left: 20px ; <!-- 左侧外边距 -- > cursor: pointer; <!-- 鼠标指到此处显示为手行 -- > float: right; <!-- 浮动:靠右 -- > } .div-content{ <!-- class选择器div-content -- > width: auto; <!-- 宽 -- > height: 200px; <!-- 高 固定值 -- > overflow: auto; <!-- 加滚动 -- > } .div-footer{ <!-- class选择器 -- > text-align: center; <!-- 文字居中 -- > background-color: darkgray; <!-- 背景色 -- > } </style > </head > <body > <button class="btn-pop" onclick="show()" >弹出一个窗口 </button > <!-- 添加一个按钮 ,onclick事件,点击调用JavaScript中的 show()函数-- > <div id="background-pop" > <!-- 设置id 以便操作和添加样式 -- > <div id="div-pop" > <!-- 弹窗对应的div -- > <div class="div-top" > <!-- 弹窗顶部对应的div -- > <span id="close-button" >× </span > <div >弹窗顶部(可以写个标题) </div > </div > <div class="div-content" > <!-- 弹窗中间对应的div -- > 放点内容进来 <br > 点击灰色位置和右上角x关闭弹窗 </div > <div class="div-footer" > <!-- 弹窗底部对应的div -- > 底部内容 </div > </div > </div > </body > <!-- 弹窗的js -- > <script > var div = document.getElementById('background-pop'); //声明 div,通过元素id获取节点,为了后续对id选择器background-pop对应的样式进行操作 var close = document.getElementById('close-button'); //声明 close 通过元素id获取节点,以便为close添加onclick事件 function show(){ //函数show()将background-pop中的display属性设置为block ,使隐藏的div显示 div.style.display = "block"; } close.onclick = function close() { // 点击窗口右上角 ×关闭弹窗;将background-pop中的display属性设置为none ,使其隐藏 div.style.display = "none"; } window.onclick = function close(e) {//点击页面中灰色部分关闭弹窗;将background-pop中的display属性设置为none ,使其隐藏 if (e.target == div) { div.style.display = "none"; } } </script > </html >
复制代码
  
over!!



上一篇:远程连接linux服务上的mysql
下一篇:linux 命令从入门到无敌~~~ 可惜忘记密码了
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-9-19 01:58

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表