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 弹出框定位实现方法
Dec 02 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
js实现网页随机验证码
Oct 19 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操作xml入门之cdata区段
2015/01/23 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python正则表达式介绍
2012/08/06 Python
python动态参数用法实例分析
2015/05/25 Python
Python学习思维导图(必看篇)
2017/06/26 Python
Python pymongo模块用法示例
2018/03/31 Python
python实现的分层随机抽样案例
2020/02/25 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
自学python用什么系统好
2020/06/23 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
总经理岗位职责
2015/02/04 职场文书
Redis 常见使用场景
2021/08/30 Redis
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
Python中三种花式打印的示例详解
2022/03/19 Python
MySQL数据库查询之多表查询总结
2022/08/05 MySQL