本文介绍如何利用 JavaScript 和 jQuery 的 AJAX 功能，通过 DOM 操作动态创建模态对话框，并异步加载指定 URL 的内容。示例展示了如何编写自定义函数处理异步请求，并将返回的 HTML 数据嵌入到模拟的弹窗中，适用于需要轻量级交互的前端场景。
JavaScript 实现 div 模拟模态对话框展现 URL 内容
本文介绍如何使用 JavaScript 实现一个由 div 元素模拟的模态对话框，用于展示从指定 URL 加载的内容。
核心代码实现
<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>
使用方法与工具推荐
具体使用方法如下：
参考以下代码示例：
<a href='#' onclick="ajax_form('http://localhost/create_user_form.html');">test</a>注意：代码排版可能不够美观。建议在实际开发中使用专业的代码格式化工具，以提升代码可读性。
推荐一款支持 C 语言风格、HTML 和 CSS 以及 JSON 代码格式化与美化的在线工具： http://tools.jb51.net/code/ccode_html_css_json
推荐一款在线 JavaScript 代码美化与格式化工具： http://tools.jb51.net/code/js
推荐一款支持 JavaScript 代码美化、压缩、格式化及加密的工具： http://tools.jb51.net/code/jscompress
推荐一款在线 JSON 代码检验、美化与格式化工具： http://tools.jb51.net/code/json
推荐一款支持 JSON 代码在线格式化、美化、压缩、编辑及转换的工具： http://tools.jb51.net/code/jsoncodeformat
如需了解更多 JavaScript 相关内容，可参考本站系列教程，包括《JavaScript 中 ajax 操作技巧总结》、《JavaScript 中 json 操作技巧总结》、《JavaScript 切换特效与技巧总结》、《JavaScript 查找算法技巧总结》、《JavaScript 动画特效与技巧汇总》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 数学运算用法总结》。
希望本文提供的 JavaScript 程序设计示例能对您有所帮助。