js实现div模拟模态对话框展现URL内容
内容摘要
本文实例讲述了js实现div模拟模态对话框展现URL内容。分享给大家供大家参考,具体如下:
<script>
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=800;//提示窗口
<script>
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=800;//提示窗口
文章正文
本文实例讲述了js实现div模拟模态对话框展现URL内容。分享给大家供大家参考,具体如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <script> function sAlert(str){ var msgw,msgh,bordercolor; msgw=800; //提示窗口的宽度 msgh=600; //提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor= "#336699" ; //提示窗口的边框颜色 titlecolor= "#99CCFF" ; //提示窗口的标题颜色 var sWidth,sHeight; sWidth=document.body.offsetWidth; sHeight=screen.height; var bgObj=document.createElement( "div" ); bgObj.setAttribute( 'id' , 'bgDiv' ); bgObj.style.position= "absolute" ; bgObj.style.top= "0" ; bgObj.style.background= "#777" ; bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75" ; bgObj.style.opacity= "0.6" ; bgObj.style.left= "0" ; bgObj.style.width=sWidth + "px" ; bgObj.style.height=sHeight + "px" ; bgObj.style.zIndex = "10000" ; document.body.appendChild(bgObj); var msgObj=document.createElement( "div" ) msgObj.setAttribute( "id" , "msgDiv" ); msgObj.setAttribute( "align" , "center" ); msgObj.style.background= "white" ; msgObj.style.border= "1px solid " + bordercolor; msgObj.style.position = "absolute" ; msgObj.style.left = "60%" ; msgObj.style.top = "20%" ; msgObj.style.font= "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif" ; msgObj.style.marginLeft = "-525px" ; msgObj.style.marginTop = -75+document.documentElement.scrollTop+ "px" ; msgObj.style.width = msgw + "px" ; msgObj.style.height =msgh + "px" ; msgObj.style.textAlign = "center" ; msgObj.style.lineHeight = "25px" ; msgObj.style.zIndex = "10001" ; var title=document.createElement( "h4" ); title.setAttribute( "id" , "msgTitle" ); title.setAttribute( "align" , "right" ); title.style.margin= "0" ; title.style.padding= "3px" ; title.style.background=bordercolor; title.style.filter= "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);" ; title.style.opacity= "0.75" ; title.style.border= "1px solid " + bordercolor; title.style.height= "18px" ; title.style.font= "12px Verdana, Geneva, Arial, Helvetica, sans-serif" ; title.style.color= "white" ; title.style.cursor= "pointer" ; title.innerHTML= "关闭" ; title.onclick= function (){ document.body.removeChild(bgObj); document.getElementById( "msgDiv" ).removeChild(title); document.body.removeChild(msgObj); } document.body.appendChild(msgObj); document.getElementById( "msgDiv" ).appendChild(title); var txt=document.createElement( "p" ); txt.style.margin= "1em 0" txt.setAttribute( "id" , "msgTxt" ); txt.innerHTML=str; document.getElementById( "msgDiv" ).appendChild(txt); } function ajax_form(url) { $.post(url, {Action: "POST" }, function (data) { sAlert(data); }, "html" ); } </script> |
用法:
http://tools.phpstudy.net/code/ccode_html_css_json
在线JavaScript代码美化、格式化工具:
http://tools.phpstudy.net/code/js
JavaScript代码美化/压缩/格式化/加密工具:
http://tools.phpstudy.net/code/jscompress
在线JSON代码检验、检验、美化、格式化工具:
http://tools.phpstudy.net/code/json
json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.phpstudy.net/code/jsoncodeformat
更多关于JavaScript相关内容可查看本站专题:《JavaScript中ajax操作技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
代码注释