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
jquery 滚动条事件简单实例
Jul 12 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
详解Vue.js 响应接口
Jul 04 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php header示例代码(推荐)
2010/09/08 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php实现购物车功能(下)
2016/01/05 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
js Math 对象的方法
2013/09/01 Javascript
js获取页面description的方法
2015/05/21 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
python绘制双柱形图代码实例
2017/12/14 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
django跳转页面传参的实现
2020/09/17 Python
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
高三毕业寄语
2014/04/10 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
减负增效提质方案
2014/05/23 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2014年节能工作总结
2014/12/18 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript