还不能自适应大小

garyBox.js

// JavaScript Document
// gary 2014-3-27
// 加了 px 在google浏览器没加这个发现设置width 和height没有用
//gary 2014-3-27
//实在不会用那些JS框架,自己弄个,我只是想要个可以加载其它页面的对话框而以,这里用了别人的代码,不过不记得来源了
//关闭那两个字可能乱码,自己另存下,这个是utf8没问题
//调用
///
//<a href="#" onclick="showGaryBox('弹窗','http://www.baidu.com',function(){alert('窗口关闭!')})">弹窗</a>
/// var garyBox ;
var garyBoxHead;
var garyBoxTitleText;
var garyBoxClose;
var garyBoxIframe; function createGaryBox()
{
document.body.innerHTML+="<div id=\"garyBox\" style=\"display:none\"><div id=\"garyBoxHead\"><h4 ><span id=\"garyBoxTitleText\">title</span></h4><h4><span id=\"garyBoxClose\">关闭</span></h4></div><div><iframe id=\"garyBoxIframe\" name=\"garyBoxIframe\" width=\"100%\" height=\"100%\" frameBorder=\"0\" frameSpacing=\"0\" scrolling=\"auto\" marginHeight=\"0\" marginWidth=\"0\" ></iframe></div></div>";
garyBox = document.getElementById("garyBox");
garyBox.style.cssText="border:1px solid #369;width:400px;height:250px;background:#e2ecf5;z-index:1000;position:absolute;display:none;"; garyBoxHead=document.getElementById("garyBoxHead");
garyBoxHead.style.cssText="height:20px;background:#369;color:#fff;padding:5px 0 0 5px;"; garyBoxTitleText=document.getElementById("garyBoxTitleText");
garyBoxTitleText.style.cssText="float:left;"; garyBoxClose = document.getElementById("garyBoxClose");
garyBoxClose.style.cssText="cursor:pointer;float:right; margin-right:10px;"; garyBoxIframe=document.getElementById("garyBoxIframe");
}
function showGaryBox(title,url,onClose,width,height)
{
if(!garyBox)createGaryBox();
if(!arguments[3]) width = 600;
if(!arguments[4]) height = 300; garyBoxTitleText.innerHTML=title;
<!--设置遮敝-->
garyBox.style.display = "block";
garyBox.style.position = "absolute";
garyBox.style.top = "50%";
garyBox.style.left = "50%";
garyBox.style.marginTop = (-height/2)+"px";
garyBox.style.marginLeft = (-width/2)+"px"; garyBox.style.width=width+'px';
garyBox.style.height=height+'px'; garyBoxIframe.style.width=garyBox.style.width;
garyBoxIframe.style.height=garyBox.style.height; var garyBoxBg = document.createElement("div");
garyBoxBg.setAttribute("id","garyBoxBg");
garyBoxBg.style.background = "#000";
garyBoxBg.style.width = "100%";
garyBoxBg.style.height = "100%";
garyBoxBg.style.position = "absolute";
garyBoxBg.style.top = "0";
garyBoxBg.style.left = "0";
garyBoxBg.style.zIndex = "500";
garyBoxBg.style.opacity = "0.3";
garyBoxBg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(garyBoxBg);
document.body.style.overflow = "hidden"; garyBoxClose.onclick = function()
{
garyBox.style.display = "none";
garyBoxBg.style.display = "none";
if(onClose)
{
onClose();
}
}
garyBoxIframe.style.margin=0;
garyBoxIframe.style.padding=0;
garyBoxIframe.src=url;
garyBoxIframe.onload=function(){ }
}

一个JS对话框,可以显示其它页面,的更多相关文章

  1. 页面嵌入QQ功能(点QQ建立一个临时会话,显示在页面的固定位置)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 使一个div始终显示在页面中间

    使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...

  3. 多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量

    多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量,并且数组变量可以直接取到每一个元素var array1 = '<%=yearList =>'; ...

  4. 自己封装的一个js方法用于获取显示的星期和日期时间

    自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...

  5. 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  6. 不支持javascript的浏览器将JS脚本显示为页面内容

    不支持javascript的浏览器将JS脚本显示为页面内容.为了防止这种情况发生,您可以使用这样的HTML注释标记:<html ><体><script type=“tex ...

  7. 当vue.js与其他js文件同时引用导致页面不显示的问题

    作为一个萌新,昨天学习的过程中遇到了vuejs与其他js在共同页面时引用时冲突的问题 具体如下 虽然注意到了前后顺序,但是页面还是出不来东西 我知道现实开发中可能不是这么引用,但是学习中是这么引入的, ...

  8. FineUIMvc随笔(7)扩展通知对话框(显示多个不重叠)

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 这篇文章我们将改造 FineUIMvc 默认的通知对话框,使得同时显示多个也不会重叠.并提前出一个公共的JS文件,供大家使用. ...

  9. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

随机推荐

  1. Python下Mysql数据连接池——单例

    # coding:utf-8 import threading import pymysql from DBUtils.PooledDB import PooledDB from app.common ...

  2. 用jquery来实现正反选选择框checkbox的小示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS常用的设计模式(3)-——观察者模式

    观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. div.onclick = ...

  4. VMWare启动虚拟机失败,提示锁定文件失败解决方法

    1.问题描述:未正常关闭虚拟机,重新启动时,VMWare启动虚拟机失败 2.解决方法: ①找到该虚拟系统所在的目录,即弹出框中的目录,在目录中找到Windows XP Professional.vmx ...

  5. SQL Server Profiler(转载)

    SQL Server Profiler工具 一.SQL Profiler工具简介 SQL Profiler是一个图形界面和一组系统存储过程,其作用如下: 图形化监视SQL Server查询: 在后台收 ...

  6. div内容溢出

    前几天遇到一个问题,代码是这样一个层次: <div class="province"> <ul> <li>1</li> <li ...

  7. Protocol Buffers教程

    今天想比较下pb和fastjson两个序列化后的大小.再看了一下pb序列化 pb官网:https://developers.google.com/protocol-buffers/ pb是啥 What ...

  8. 2.storm的安装

    1.前提是linux系统已经安装了上一篇讲的Zookeeper和jdk[1.7及以上版本]还有python[centos已经自带,2.6及以上版本] 2.解压storm压缩包 sudo tar -zx ...

  9. 【基础笔记】《html&CSS设计与构造网站》一书导读

    ◉HTML 1.结构网页使用HTML HyperText Markup Language 来描述页面结构超文本标记语言允许对文本建立链接,允许对文本进行标记网页开头都有一个DOCTYPE 文档类型 声 ...

  10. caffe-windows之网络描述文件和参数配置文件注释(mnist例程)

    caffe-windows之网络描述文件和参数配置文件注释(mnist例程) lenet_solver.prototxt:在训练和测试时涉及到一些参数配置,训练超参数文件 <-----lenet ...