JGUI源码:实现蒙版层显示(18)
有的时候需要显示一个蒙版层,蒙版层显示的主要原理是在指定元素比如div上创建一个子元素div,设置absolute、宽高100%、设置z-index置于顶层,设置半透明效果,fadein,fadeout即可。如下一段简单代码即可实现。
<body> <div>这是mask界面显示代码</div> <div id="test" style="background-color:#124567;color:white;width:100px">点击弹出</div> <script type="text/javascript"> function showMask() { var topWin=(function(){ var p=window.parent; while(p!=p.window.parent){p=p.window.parent;} return p; })();//获取顶层窗口 var topwindowbody=topWin.document.body;//获取顶层窗口的body元素 $(topwindowbody).append( '<div class="jgui-mask" style="position:absolute;width: 100%;height: 100%;;z-index:1000;background-color: #000;opacity: 0;"></div>' ); $(".jgui-mask",topwindowbody).fadeIn(0, function(){//显示 $(this).fadeTo('fast', 0.5);//从全透明到半透明 }); $(".jgui-mask",topwindowbody) .unbind("click") .click(function() { $(this).fadeOut("fast", 0, function() {//隐藏 $(this).remove(); }); }); } $(function() { $("#test").click(function() { showMask(); }); }); </script> </body>
程序界面如下
点击弹出即可弹出遮罩层,再点击就会关闭。
演示:www.jgui.com
本博客是个人工作中记录,更深层次的问题可以提供有偿技术支持。
另外建了几个QQ技术群:
2、全栈技术群:616945527
2、硬件嵌入式开发: 75764412
3、Go语言交流群:9924600
闲置域名WWW.EXAI.CN (超级人工智能)出售。
另外建了几个QQ技术群:
2、全栈技术群:616945527
2、硬件嵌入式开发: 75764412
3、Go语言交流群:9924600
闲置域名WWW.EXAI.CN (超级人工智能)出售。