JQuery弹出层，实现弹层切换，可显示可隐藏。_html/css_WEB-ITnose
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery弹出层效果</title> 5 <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> 6 <meta content="jQuery弹出层效果，有关闭按钮，代码简单易懂，你可以随意修改弹出层的参数。" name="description" /> 7 <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> 8 <style> 9 .black_overlay{10 display: none;11 position: absolute;12 top: 0%;13 left: 0%;14 width: 100%;15 height: 100%;16 background-color: black;17 z-index:1001;18 -moz-opacity: 0.8;19 opacity:.80;20 filter: alpha(opacity=80);21 }22 .white_content {23 display: none;24 position: absolute;25 top: 10%;26 left: 10%;27 width: 80%;28 height: 80%;29 border: 16px solid lightblue;30 background-color: white;31 z-index:1002;32 overflow: auto;33 }34 .white_content_small {35 display: none;36 position: absolute;37 top: 20%;38 left: 30%;39 width: 40%;40 height: 50%;41 border: 16px solid lightblue;42 background-color: white;43 z-index:1002;44 overflow: auto;45 }46 </style>47 <script type="text/javascript">48 //弹出隐藏层49 function ShowDiv(show_div,bg_div){50 document.getElementById(show_div).style.display='block';51 document.getElementById(bg_div).style.display='block' ;52 var bgdiv = document.getElementById(bg_div);53 bgdiv.style.width = document.body.scrollWidth;54 // bgdiv.style.height = $(document).height();55 $("#"+bg_div).height($(document).height());56 };57 //关闭弹出层58 function CloseDiv(show_div,bg_div)59 {60 document.getElementById(show_div).style.display='none';61 document.getElementById(bg_div).style.display='none';62 };63 </script>64 </head>65 <body>66 <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />67 <!--弹出层时背景层DIV-->68 <div id="fade" class="black_overlay">69 </div>70 <div id="MyDiv" class="white_content">71 <div style="text-align: right; cursor: default; height: 40px;">72 <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>73 </div>74 推荐自定义改造75 </div>76 </body>77 </html>
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML，CSS和JavaScript：Web开发人员的基本工具
Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。
HTML：结构，CSS：样式，JavaScript：行为
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML的未来：网络设计的发展和趋势
Apr 17, 2025 am 12:12 AM
HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML，CSS和JavaScript的未来：网络开发趋势
Apr 19, 2025 am 12:02 AM
HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。
HTML与CSS vs. JavaScript：比较概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML：建立网页的结构
Apr 14, 2025 am 12:14 AM
HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。
