CGI程序学习(6)-在CGI程序中实现Html加载的Dialog弹出框

公司项目中需要配置网络,获取WIFI列表后在网页上需要选择WIFI名称和输入密码,点击确定后底层会执行一个Shell时,该Shell需要耗时2-5秒,这时候我们需要一个弹出框阻挡用户点击其他实现一个执行加载的过程,原以为会跟Android一样简单,后来发现还是有很多需要注意的地方,备份记忆.

获取WIFI列表后显示如下图:

输入密码后点击设置,显示弹出框效果如下图:

---------------------------------------------------------------------------------分割线-------------------------------------------------------------------------------------

第一张图的CGI程序为:

<span style="white-space:pre"></span>printf("<form class=\"form-horizontal\" action=\"/cgi-bin/setpwd.cgi\">\n");printf(" <div class=\"control-group\">\n");printf("<label class=\"control-label\" for=\"selectError\">WIFI 名称:</label>\n");printf("<div class=\"controls\">\n");printf("<select name=\"name\" style=\"width:260px\" id=\"selectError\" data-rel=\"chosen\">\n");for(j = 0; j < array_number ; j++){printf("<option value=\"%s\">%s</option>\n",wifiname_user[j],wifiname_user[j]);}printf("</select>\n");printf("</div>\n");printf("</div>\n");printf("<div class=\"control-group\">\n");printf("<label class=\"control-label\" for=\"focusedInput\">WIFI 密码:</label>\n");printf("<div class=\"controls\">\n");printf("<input id=\"pwdInput\" style=\"width:250px\" class=\"input-xlarge focused\" required=\"required\" type=\"text\" name=\"pwd\">\n");printf("</div>\n");printf("</div>\n");printf("<div class=\"form-actions\">\n");printf("<button type=\"submit\" class=\"btn\" onclick=\"sAlert()\">设置</button>\n");printf("<button type=\"reset\" class=\"btn\">取消</button>\n");printf("</div>\n");printf("</form>\n"); 

点击按钮后会先执行sAlert(),该程序为一个弹出框Dialog，用来加载等待,CGI代码如下:

<span style="white-space:pre"></span>printf("<script type=\"text/javascript\" language=\"javascript\">\n");printf("function sAlert()\n");printf("{\n");printf("var valuePwd = document.getElementById(\"pwdInput\").value;\n");printf("if(valuePwd!=null && valuePwd!=\"\")\n");printf("{\n");printf("var msgw,msgh,bordercolor;\n");printf("msgw=400;//提示窗口的宽度\n");printf("msgh=100;//提示窗口的高度\n");printf("titleheight=25 //提示窗口标题高度\n");printf("bordercolor=\"#26292e\";//提示窗口的边框颜色\n");printf("titlecolor=\"#99CCFF\";//提示窗口的标题颜色\n");printf("var sWidth,sHeight;\n");printf("sWidth=document.body.offsetWidth;\n");printf("sHeight=screen.height;\n");printf("var bgObj=document.createElement(\"div\");\n");printf("bgObj.setAttribute(\'id\',\'bgDiv\');\n");printf("bgObj.style.position=\"absolute\";\n");printf("bgObj.style.top=\"0\";\n");printf("bgObj.style.background=\"#26292e\";\n");printf("bgObj.style.filter=\"progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75\";\n");printf("bgObj.style.opacity=\"0.6\";\n");printf("bgObj.style.left=\"0\";\n");printf("bgObj.style.width=sWidth + \"px\";\n");printf("bgObj.style.height=sHeight + \"px\";\n");printf("bgObj.style.zIndex = \"10000\";\n");printf("document.body.appendChild(bgObj);\n");printf("var msgObj=document.createElement(\"div\")\n");printf("msgObj.setAttribute(\"id\",\"msgDiv\");\n");printf("msgObj.setAttribute(\"align\",\"center\");\n");printf("msgObj.style.background=\"white\";\n");printf("msgObj.style.border=\"1px solid\" + bordercolor;\n");printf("msgObj.style.position = \"absolute\";\n");printf("msgObj.style.left = \"50%%\";\n");printf("msgObj.style.top = \"50%%\";\n");printf("msgObj.style.font=\"12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif\";\n");printf("msgObj.style.marginLeft = \"-225px\" ;\n");printf("msgObj.style.marginTop = -75+document.documentElement.scrollTop+\"px\";\n");printf("msgObj.style.width = msgw + \"px\";\n");printf("msgObj.style.height =msgh + \"px\";\n");printf("msgObj.style.textAlign = \"center\";\n");printf("msgObj.style.lineHeight =\"25px\";\n");printf("msgObj.style.zIndex = \"10001\";\n");printf("var title=document.createElement(\"h4\");\n");printf("title.setAttribute(\"id\",\"msgTitle\");\n");printf("title.setAttribute(\"align\",\"right\");\n");printf("title.style.margin=\"0\";\n");printf("title.style.padding=\"3px\";\n");printf("title.style.background=bordercolor;\n");printf("title.style.filter=\"progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);\";\n");printf("title.style.opacity=\"0.9\";\n");printf("title.style.border=\"1px solid\" + bordercolor;\n");printf("title.style.height=\"18px\";\n");printf("title.style.font=\"12px Verdana, Geneva, Arial, Helvetica, sans-serif\";\n");printf("title.style.color=\"white\";\n");printf("title.style.cursor=\"pointer\";\n");printf("title.innerHTML=\"关闭\";\n");printf("title.onclick=function()\n");printf("{\n");printf("document.body.removeChild(bgObj);\n");printf("document.getElementById(\"msgDiv\").removeChild(title);\n");printf("document.body.removeChild(msgObj);\n");printf("}\n");printf("document.body.appendChild(msgObj);\n");printf("document.getElementById(\"msgDiv\").appendChild(title);\n");printf("var txt=document.createElement(\"p\");\n");printf("txt.style.margin=\"1em 0\";\n");printf("txt.setAttribute(\"id\",\"msgTxt\");\n");printf("txt.style.color=\"black\";\n");printf("txt.style.font=\"12px Verdana, Geneva, Arial, Helvetica, sans-serif\";\n");printf("txt.innerHTML=\"<img src=\'../img/loding.gif\'><p>配置网络中...</p>\";\n");printf("document.getElementById(\"msgDiv\").appendChild(txt);\n");printf("}\n");printf("}\n");printf("</script>\n");

解决问题的整个过程中,先碰到是该弹出框代码如何实现,参考了该代码:http://www.veryhuo.com/a/view/38279.html

然后碰到的问题是在C代码中%的使用,编译的时候一直无法执行这段代码

printf("msgObj.style.left = \"50%\";\n");printf("msgObj.style.top = \"50%\";\n");

会报类似warning: unknown conversion type character * in format的问题.

百度查找原因发现因为%对printf函数比较特殊，所以需要进行特殊处理.
当你想用printf输出一个 % 的时候，需要这样使用 printf("%%"),

printf("msgObj.style.left = \"50%%\";\n");printf("msgObj.style.top = \"50%%\";\n");

代码修改后就能正确运行了.其中问题还是有的,字体感觉不是很好,有模糊的感觉,可能跟透明度设定有关,有解决办法的同学赶紧@我.