相思资源网 Design By www.200059.com

本文实例讲述了js实现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>

PS:代码排版貌似不太尽如人意,这里小编给大家推荐几款代码格式化工具,相信在以后的编程开发中能够用得到:

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程序设计有所帮助。

标签:
js,div,模态对话框,URL内容

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“js实现div模拟模态对话框展现URL内容”

暂无js实现div模拟模态对话框展现URL内容的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。