This article describes the simple and easy-to-use mobile phone floating window display effect. Share it for your reference, as follows:
html:
<style type="text/css">.fdBonTel{ width:100%; height:53px; position:fixed; background:#0052ae; text-align:center; left:0; bottom:0; z-index:999; }.fdOnline{ background:url(index/images/online.png) no-repeat; width:255px; height:181px; position:fixed; left:50%; margin-left:-128px; top:40%; z-index:999; border-radius: 15px; box-shadow: 0 0 20px rgba(10, 2, 4, 0.75);}.fdOnline .fdOClose{ width:44px; height:44px; display:block; margin-top:-17px; margin-right:-6px;}.fdOnline .fdOTel{ background:#CF3; width:127px; height:58px; display:block; margin-top:123px;}.fdOnline .fdOOn{ background:#036; width:128px; height:58px; display:block; margin-top:96px;}</style><div> <img src="index/images/fdTel.gif" usemap="#Maps"> <map name="Maps" id="Maps"> <area shape="rect" coords="2,2,79,52" onClick="openZoosUrl();"> <area shape="rect" coords="77,2,166,52" href="tel:0855-8253310"> <area shape="rect" coords="166,4,242,51" onClick="openZoosUrl();"> <area shape="rect" coordinates="248,5,318,53" onClick="openZoosUrl();"> </map></div><div id="fdOnline"> <a href="###" onclick="closeOnline();"><img src="index/images/closeBtn.png"></a> <a href="###"></a> <a href="###"></a></div>js:
// JavaScript Documentdocument.writeln("<style type=/"text/css/">");document.writeln(".fdBonTel{ width:100%; height:53px; position:fixed; background:#0052ae; text-align:center; left:0; bottom:0; z-index:999; }");document.writeln(".fdOnline{ background:url(index/images/online.png) no-repeat; width:255px; height:181px; position:fixed; left:50%; margin-left:-128px; top:40%; z-index:999; border-radius: 15px; box-shadow: 0 0 20px rgba(10, 2, 4, 0.75);}"); document.writeln(".fdOnline .fdOClose{ width:44px; height:44px; display:block; margin-top:-17px; margin-right:-6px;}"); document.writeln(".fdOnline .fdOTel{ width:127px; height:58px; display:block; margin-top:123px;}");document.writeln(".fdOnline .fdOOn{ width:128px; height:58px; display:block; margin-top:96px;}");document.writeln("<div class=/"fdBonTel/">");document.writeln(" <img src=/"index/images/fdTel.gif/" usemap=/"#Maps/">");document.writeln(" <map name=/"Maps/"");document.writeln(" <map name=/"Maps/" id=/"Maps/">");document.writeln(" <area shape=/"rect/"coords=/"2,2,79,52/" onClick=/"openZoosUrl();/">");document.writeln(" <area shape=/"rect/"coords=/"77,2,166,52/" href=/"tel:0855-8253310/">");document.writeln(" <area shape=/"rect/"coords=/"166,4,242,51/" onClick=/"openZoosUrl();/">");document.writeln(" <area shape=/"rect/"coords=/"248,5,318,53/" onClick=/"openZoosUrl();/">");document.writeln(" </map>");document.writeln("</div>");document.writeln("<div class=/"fdOnline/" id=/"fdOnline/">");document.writeln(" <a href=/"###/" class=/"fdOClose f_r/" onclick=/"closeOnline();/"><img src=/"index/images/closeBtn.png/" width=/"44/"height=/"44/"></a>");document.writeln(" <a href=/"###/" class=/"fdOTel f_l/"></a>");document.writeln(" <a href=/"###/" class=/"fdOOn f_r/"></a>");document.writeln("</div>");function showOnline() { if (document.getElementById("fdOnline")) { if (document.getElementById("fdOnline").style.display == "none") { document.getElementById("fdOnline").style.display = "block"; } }}function closeOnline() { document.getElementById("fdOnline").style.display = "none"; setInterval(chkSWT, 30000);};$(function(){ setInterval(showOnline, 30000);});Reproduction image:
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Traversal Algorithm and Skills", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Data Structures and Algorithm Skills" and "Summary of JavaScript Mathematical Operation Usage"
I hope this article will be helpful to everyone's JavaScript programming.