前台页面:

<img src="chb/老玩家 好礼送.jpg" border="0" width="202" height="254" onclick="DL()" style="cursor: pointer" />

JS:

        function DL() {
dl = new Dialog({ type: 'iframe', value: 'chb/NewService.aspx' }, { id: 'Dialog1', showTitle: false });
dl.show();
}
function DLClose() {
dl.close();
}

dialog.css :

.dialog iframe
{
height: %;
width: %;
} .dialog img
{
height: %;
width: %;
}

dialog.js :

/**
* Dialog
*
* @author caixw <http://www.caixw.com>
* @copyright Copyright (C) 2010, http://www.caixw.com
* @license FreeBSD license
*/ /**
* jQuery的Dialog插件。
*
* @param object content
* @param object options 选项。
* @return
*/
function Dialog(content, options)
{
var defaults = { // 默认值。
title:'标题', // 标题文本,若不想显示title请通过CSS设置其display为none
showTitle:true, // 是否显示标题栏。
closeText:'[关闭]', // 关闭按钮文字,若不想显示关闭按钮请通过CSS设置其display为none
draggable:true, // 是否移动
modal:true, // 是否是模态对话框
center:true, // 是否居中。
fixed:true, // 是否跟随页面滚动。
time:, // 自动关闭时间,为0表示不会自动关闭。
id:false // 对话框的id,若为false,则由系统自动产生一个唯一id。
};
var options = $.extend(defaults, options);
options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID
var overlayId = options.id + '-overlay'; // 遮罩层ID
var timeId = null; // 自动关闭计时器
var isShow = false;
var isIe = $.browser.msie;
var isIe6 = $.browser.msie && ('6.0' == $.browser.version); /* 对话框的布局及标题内容。*/
var barHtml = !options.showTitle ? '' :
'<div class="bar"><span class="title">' + options.title + '</span><a class="close">' + options.closeText + '</a></div>';
var dialog = $('<div id="' + options.id + '" class="dialog">'+barHtml+'<div class="content"></div></div>').hide();
$('body').append(dialog); /**
* 重置对话框的位置。
*
* 主要是在需要居中的时候,每次加载完内容,都要重新定位
*
* @return void
*/
var resetPos = function()
{
/* 是否需要居中定位,必需在已经知道了dialog元素大小的情况下,才能正确居中,也就是要先设置dialog的内容。 */
if(options.center)
{
var left = ($(window).width() - dialog.width()) / ;
var top = ($(window).height() - dialog.height()) / ;
if(!isIe6 && options.fixed)
{ dialog.css({top:top,left:left}); }
else
{ dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()}); }
}
} /**
* 初始化位置及一些事件函数。
*
* 其中的this表示Dialog对象而不是init函数。
*/
var init = function()
{
/* 是否需要初始化背景遮罩层 */
if(options.modal)
{
$('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');
$('#' + overlayId).css({'left':, 'top':,
/*'width':$(document).width(),*/
'width':'100%',
/* 'height':'100%',*/
'height':$(document).height(),
'z-index':++Dialog.__zindex,
'position':'absolute'})
.hide();
} dialog.css({'z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'}); /* IE6 兼容fixed代码 */
if(isIe6 && options.fixed)
{
dialog.css('position','absolute');
resetPos();
var top = parseInt(dialog.css('top')) - $(document).scrollTop();
var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
$(window).scroll(function(){
dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
});
} /* 以下代码处理框体是否可以移动 */
var mouse={x:,y:};
function moveDialog(event)
{
var e = window.event || event;
var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
dialog.css({top:top,left:left});
mouse.x = e.clientX;
mouse.y = e.clientY;
};
dialog.find('.bar').mousedown(function(event){
if(!options.draggable){ return; } var e = window.event || event;
mouse.x = e.clientX;
mouse.y = e.clientY;
$(document).bind('mousemove',moveDialog);
});
$(document).mouseup(function(event){
$(document).unbind('mousemove', moveDialog);
}); /* 绑定一些相关事件。 */
dialog.find('.close').bind('click', this.close);
dialog.bind('mousedown', function(){ dialog.css('z-index', ++Dialog.__zindex); }); // 自动关闭
if( != options.time){ timeId = setTimeout(this.close, options.time); }
} /**
* 设置对话框的内容。
*
* @param string c 可以是HTML文本。
* @return void
*/
this.setContent = function(c)
{
var div = dialog.find('.content');
if('object' == typeof(c))
{
switch(c.type.toLowerCase())
{
case 'id': // 将ID的内容复制过来,原来的还在。
div.html($('#' + c.value).html());
break;
case 'img':
div.html('加载中...');
$('<img alt="" />').load(function(){div.empty().append($(this));resetPos();})
.attr('src',c.value);
break;
case 'url':
div.html('加载中...');
$.ajax({url:c.value,
success:function(html){div.html(html);resetPos();},
error:function(xml,textStatus,error){div.html('出错啦')}
});
break;
case 'iframe':
div.append($('<iframe border="0" marginwidth="0" scrolling="no" frameborder="no" allowtransparency="true" marginheight="0" src="' + c.value + '" />'));
break;
case 'text':
default:
div.html(c.value);
break;
}
}
else
{ div.html(c); }
} /**
* 显示对话框
*/
this.show = function()
{
if(undefined != options.beforeShow && !options.beforeShow())
{ return; } /**
* 获得某一元素的透明度。IE从滤境中获得。
*
* @return float
*/
var getOpacity = function(id)
{
if(!isIe)
{ return $('#' + id).css('opacity'); } var el = document.getElementById(id);
return (undefined != el
&& undefined != el.filters
&& undefined != el.filters.alpha
&& undefined != el.filters.alpha.opacity)
? el.filters.alpha.opacity / : ;
}
/* 是否显示背景遮罩层 */
if(options.modal)
{ $('#' + overlayId).fadeTo('slow', getOpacity(overlayId)); }
dialog.fadeTo('slow', getOpacity(options.id), function(){
if(undefined != options.afterShow){ options.afterShow(); }
isShow = true;
});
// 自动关闭
if( != options.time){ timeId = setTimeout(this.close, options.time); } resetPos();
} /**
* 隐藏对话框。但并不取消窗口内容。
*/
this.hide = function()
{
if(!isShow){ return; } if(undefined != options.beforeHide && !options.beforeHide())
{ return; } dialog.fadeOut('slow',function(){
if(undefined != options.afterHide){ options.afterHide(); }
});
if(options.modal)
{ $('#' + overlayId).fadeOut('slow'); } isShow = false;
} /**
* 关闭对话框
*
* @return void
*/
this.close = function()
{
if(undefined != options.beforeClose && !options.beforeClose())
{ return; } dialog.fadeOut('slow', function(){
$(this).remove();
isShow = false;
if(undefined != options.afterClose){ options.afterClose(); }
});
if(options.modal)
{ $('#'+overlayId).fadeOut('slow', function(){$(this).remove();}); }
clearTimeout(timeId);
} init.call(this);
this.setContent(content); Dialog.__count++;
Dialog.__zindex++;
}
Dialog.__zindex = ;
Dialog.__count = ;
Dialog.version = '1.0 beta'; function dialog(content, options)
{
var dlg = new Dialog(content, options);
dlg.show();
return dlg;
}

弹层上的关闭按钮 :

<img src="kl1.png" onclick="CC()" border="0" style="cursor: pointer" />

JS :

    <script type="text/javascript" language="javascript">
function CC() {
parent.window.DLClose();
} function gb() {
alert("您已经登记成功!");
CC();
} function dgg() {
alert("您已经登记过了!");
CC();
}
</script>

后台代码 :

Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "<script> gb();</script>");

弹层,iframe页面的更多相关文章

  1. IOS 微信返回按钮事件控制弹层关闭还是返回上一页

    在微信公共号内绑定域名后或微信内打开第三方链接跳转非单页面网站时,经常会有弹层Modal的需求,此时如果用户习惯性点击微信自带的返回“<”按钮,就会跳转回上一页或退出网站,而为了避免这种不好的误 ...

  2. 借用layer让弹层不限制在iframe内部

    使用方法: 1 除了layer的success,end,cancel回掉函数以外其它的layer参数都可以使用. 2 使用前在layer的js后边把该js引入(可以命名为layerExtend). 3 ...

  3. 使用layui iframe弹层,各弹层之前的传值问题

    最近做一个后台管理系统,用到的layui,主要是使用它的弹层,但是各个弹层之前的传值经常容易搞晕,写个个博客记录一下,方便自己,也方便别人, 首先我的页面已经嵌套了好几个iframe页面了,嵌套了三个 ...

  4. 关于弹出层(iframe)时刷新页面的js

    [javascript] view plaincopyprint? iframe弹出子页面刷新父页面iframe parent.location.reload(); [javascript] view ...

  5. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  6. IE6利用iframe遮挡 弹层 select

    ie6的老bug了,select老是会挡住 弹层里的内容. 解决办法:(box需要设置高度) <div class="box"> <!--[if IE 6]> ...

  7. 弹出iframe内嵌页面元素到父页面并全屏化

    (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...

  8. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

  9. jquery layer弹窗弹层插件 小巧强大

    /* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...

随机推荐

  1. MVc Forms Membership rolemanage 角色权限验证管理

    Forms  登录验证Membership 权限验证rolemanage 角色管理 以往的项目中只有单纯的Forms 验证今天想把这三个结合到mvc 中发现要导入aspnet_ 相关表,但是有个问题验 ...

  2. Android ContentProvider介绍

    在Android中数据的存储一共有五种形式,分别是:Shared Preferences.网络存储.文件存储,外储存储.SQLite.但是我们知道一般这些存储都只是在单独的一个应用程序之中达到一个数据 ...

  3. FreeSWITCH 1.2.5.3 Step by Step Install

    Ubuntu: apt-get -y install build-essential automake autoconf git-core wget libtool apt-get -y instal ...

  4. PMI列子1

    遍历得到PMI中,是注释类型的,你可以参考一下.int num_text, thetype, thesubtype;tag_t  draft_aid_tag = NULL_TAG;UF_UI_open ...

  5. SaaS模式给用户带来的优势

    这两年SaaS服务在中国越来越受欢迎,企业正在从使用本地化软件向SaaS服务转变.由于企业用户人力成本的上升.移动终端设备的兴起以及共享经济对企业的影响,企业采用经营设备.软件的方式也在逐渐发生着变化 ...

  6. 表单验证插件 - formValidator

    表单验证插件 - formValidator * 引入formValidator插件文件 * 引入formValidator插件的主文件 * 引入formValidator插件的正则有关文件 * 引入 ...

  7. 初识C语言

    C语言是开发iOS软件的基础. 一.C语言简介 1.      简史 1)          C语言于1972年发明,首次使用是用于重写UINX操作系统(UNIX以前主要是用汇编语言写的,它奠定了操作 ...

  8. JSON字符串解析

    有时保存在数据库的数据是一串json字符串,需要进行读取的时候就需要解析操作. 简单介绍两种: 1.net.sf.json.* 2.com.alibaba.fastjson.* 需要的包自行下载. 第 ...

  9. window下flask开发环境搭建

    1.安装python 官网下载https://www.python.org/downloads/,按提示安装就行,记住安装目录,把它添加到系统path中. 2.安装pip 官网下载pip文件:http ...

  10. php 学习日志- 变量作用域

    1.global 函数内访问全局变量 <?php $x=5; $y=10; function myTest() { global $x,$y; $y=$x+$y; } myTest(); ech ...