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 相关文章推荐
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
javascript中this指向详解
Apr 23 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
基于vue.js实现的分页
Mar 13 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
php表单转换textarea换行符的方法
2010/09/10 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
再论Javascript下字符串连接的性能
2011/03/05 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
使用Python生成XML的方法实例
2017/03/21 Python
python内存动态分配过程详解
2019/07/15 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
会计找工作求职信范文
2013/12/09 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
cf收人广告词
2014/03/14 职场文书
销售团队激励口号
2014/06/06 职场文书
小学生植树节活动总结
2014/07/04 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
签订劳动合同通知书
2015/04/16 职场文书
详解MySQL集群搭建
2021/05/26 MySQL