This article describes the implementation of the JS div simulation dialog box to display URL content. Share it for your reference, as follows:
<script>function sAlert(str){ var msgw,msgh,bordercolor; msgw=800;//The width of the prompt window msgh=600;//The height of the prompt window titleheight=25 //The titleheight of the prompt window border color="#336699";//The border color of the prompt window titlecolor="#99CCFF";//The title color of the prompt window 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="Close"; 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>usage:
Copy the code as follows: <a href='#' onclick="ajax_form('http://localhost/create_user_form.html');">test</a>
PS: The code layout seems to be not satisfactory. Here I recommend several code formatting tools to you. I believe that it can be used in future programming development:
C language style/HTML/CSS/json code formatting and beautification tools:
http://tools.VeVB.COM/code/ccode_html_css_json
Online JavaScript code beautification and formatting tools:
http://tools.VeVB.COM/code/js
JavaScript code beautification/compression/formatting/encryption tools:
http://tools.VeVB.COM/code/jscompress
Online JSON code verification, inspection, beautification and formatting tools:
http://tools.VeVB.COM/code/json
json code online formatting/beautification/compression/editing/converting tools:
http://tools.VeVB.COM/code/jsoncodeformat
For more information about JavaScript, please check this site's special topics: "Summary of Ajax Operation Skills in JavaScript", "Summary of JSON Operation Skills in JavaScript", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.