js实现div模拟模态对话框展现URL内容


Posted in Javascript onMay 27, 2016

本文实例讲述了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>
Javascript 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
wordpress之js库集合研究介绍
Aug 17 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
js分页工具实例
Jan 28 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 #Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 #Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 #Javascript
Node.js的npm包管理器基础使用教程
May 26 #Javascript
JavaScript中的各种操作符使用总结
May 26 #Javascript
浅析JavaScript中的对象类型Object
May 26 #Javascript
简单总结JavaScript中的String字符串类型
May 26 #Javascript
You might like
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
Python基础学习之常见的内建函数整理
2017/09/06 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
python实现双人五子棋(终端版)
2020/12/30 Python
10张动图学会python循环与递归问题
2021/02/06 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
管理部副部长岗位职责范文
2014/03/09 职场文书
企业安全生产标语
2014/06/06 职场文书
经营目标管理责任书
2014/07/25 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
简历中自我评价范文
2015/03/11 职场文书
语文教师求职信范文
2015/03/20 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang