电脑教程子分类       会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款jQuery&Dialog弹出层对话框插件演示
new&Dialog('这是一个默认对话框').show();&&
new Dialog('这是一个默认对话框').show();
非模态对话框
new&Dialog('非模态对话框，可以打开多个！',{modal:false}).show();&&
new Dialog('非模态对话框，可以打开多个！',{modal:false}).show();
new&Dialog('5秒后自动关闭',{time:5000}).show();&&
new Dialog('5秒后自动关闭',{time:5000}).show();
非fixed模式
new&Dialog('对话框不随滚动条移动',{fixed:false}).show();&&
new Dialog('对话框不随滚动条移动',{fixed:false}).show();
显示指定ID的内容
//&将显示本标签内的内容。&&
new&Dialog({type:'id',value:'content-type-id'}).show();&&
// 将显示本标签内的内容。
new Dialog({type:'id',value:'content-type-id'}).show();
加载一张图片
new&Dialog({type:'img',value:'/public/uploads/demo/images/300x125.gif'}).show();&&
new Dialog({type:'img',value:'/public/uploads/demo/images/300x125.gif'}).show();
加载一URL到iframe
new&Dialog({type:'iframe',value:''}).show();&&
new Dialog({type:'iframe',value:''}).show();
加载一URL地址
new&Dialog({type:'url',value:'/public/uploads/demo/jquery/dialog/test.html'}).show();&&
new Dialog({type:'url',value:'/public/uploads/demo/jquery/dialog/test.html'}).show();
自定义背景遮盖层
#dialog1-overlay&&
&&background:&&
&&opacity:0.8;&&
&&filter:alpha(opacity=80);&&
#dialog1-overlay
background:
opacity:0.8;
filter:alpha(opacity=80);
自定义内容部分背景
#dialog2&.content&&
&&width:250&&
&&height:80&&
&&background-image:url(/public/uploads/demo/images/300x125.gif);&&
#dialog2 .content
background-image:url(/public/uploads/demo/images/300x125.gif);
show()函数
new&Dialog('show()回调函数'&&
&&&&{beforeShow:function(){alert('before&show'),return&true},afterShow:function(){alert('after&show');}})&&
&&&&.show();&&
new Dialog('show()回调函数'
{beforeShow:function(){alert('before show'),return true},afterShow:function(){alert('after show');}})
hide()函数
dlg&=&new&Dialog('hide()回调函数'&&
&&&&{beforeHide:function(){alert('before&hide'),return&true},afterHide:function(){alert('after&hide');}})&&
&&&&.show();&&
dlg.hide();&&
dlg = new Dialog('hide()回调函数'
{beforeHide:function(){alert('before hide'),return true},afterHide:function(){alert('after hide');}})
dlg.hide();
close()函数
new&Dialog('close()回调函数'&&
&&&&{beforeClose:function(){alert('before&close'),return&true},afterClose:function(){alert('after&close');}})&&
&&&&.show();&&
new Dialog('close()回调函数'
{beforeClose:function(){alert('before close'),return true},afterClose:function(){alert('after close');}})
function&Dialog(content,&options)&&
&&&&var&defaults&=&{&//&默认值。&&&
&&&&&&&&title:'标题',&&&&&&&//&标题文本，若不想显示title请通过CSS设置其display为none&&&
&&&&&&&&showTitle:true,&&&&&//&是否显示标题栏。&&
&&&&&&&&closeText:'[关闭]',&//&关闭按钮文字，若不想显示关闭按钮请通过CSS设置其display为none&&&
&&&&&&&&draggable:true,&&&&&//&是否移动&&&
&&&&&&&&modal:true,&&&&&&&&&//&是否是模态对话框&&&
&&&&&&&¢er:true,&&&&&&&&//&是否居中。&&&
&&&&&&&&fixed:true,&&&&&&&&&//&是否跟随页面滚动。&&
&&&&&&&&time:0,&&&&&&&&&&&&&//&自动关闭时间，为0表示不会自动关闭。&&&
&&&&&&&&id:false&&&&&&&&&&&&//&对话框的id，若为false，则由系统自动产生一个唯一id。&&&
&&&&var&options&=&$.extend(defaults,&options);&&
&&&&options.id&=&options.id&?&options.id&:&'dialog-'&+&Dialog.__&//&唯一ID&&
&&&&var&overlayId&=&options.id&+&'-overlay';&//&遮罩层ID&&
&&&&var&timeId&=&null;&&//&自动关闭计时器&&&
&&&&var&isShow&=&false;&&
&&&&var&isIe&=&$.browser.&&
&&&&var&isIe6&=&$.browser.msie&&&&('6.0'&==&$.browser.version);&&
&&&&var&barHtml&=&!options.showTitle&?&''&:&&
&&&&&&&&'&&/span&div&class="bar"&&&/span&span&class="title"&'&+&options.title&+&'&/&/span&span&&&/span&a&class="close"&'&+&options.closeText&+&'&/&/span&a&&/&/span&div&';&&
&&&&var&dialog&=&$('&&/span&div&id="'&+&options.id&+&'"&class="dialog"&'+barHtml+'&&/span&div&class="content"&&/&/span&div&&/&/span&div&').hide();&&
&&&&$('body').append(dialog);&&
&&&&var&resetPos&=&function()&&
&&&&&&&&&&
&&&&&&&&if(options.center)&&
&&&&&&&&{&&
&&&&&&&&&&&&var&left&=&($(window).width()&-&dialog.width())&/&2;&&
&&&&&&&&&&&&var&top&=&($(window).height()&-&dialog.height())&/&2;&&
&&&&&&&&&&&&if(!isIe6&&&&options.fixed)&&
&&&&&&&&&&&&{&&&dialog.css({top:top,left:left});&&&}&&
&&&&&&&&&&&&else&&
&&&&&&&&&&&&{&&&dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()});&&&}&&
&&&&&&&&}&&
&&&&var&init&=&function()&&
&&&&&&&&&&
&&&&&&&&if(options.modal)&&
&&&&&&&&{&&
&&&&&&&&&&&&$('body').append('&&/span&div&id="'&+&overlayId&+&'"&class="dialog-overlay"&&/&/span&div&');&&
&&&&&&&&&&&&$('#'&+&overlayId).css({'left':0,&'top':0,&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&'width':'100%',&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&'height':$(document).height(),&&
&&&&&&&&&&&&&&&&&&&&'z-index':++Dialog.__zindex,&&
&&&&&&&&&&&&&&&&&&&&'position':'absolute'})&&
&&&&&&&&&&&&&&&&.hide();&&
&&&&&&&&}&&
&&&&&&&&dialog.css({'z-index':++Dialog.__zindex,&'position':options.fixed&?&'fixed'&:&'absolute'});&&
&&&&&&&&&&
&&&&&&&&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:0,y:0};&&
&&&&&&&&function&moveDialog(event)&&
&&&&&&&&{&&
&&&&&&&&&&&&var&e&=&window.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){&&&}&&
&&&&&&&&&&&&var&e&=&window.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(0&!=&options.time){&&timeId&=&setTimeout(this.close,&options.time);&&&&}&&
&&&&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());&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&'img':&&
&&&&&&&&&&&&&&&&div.html('加载中...');&&
&&&&&&&&&&&&&&&&$('&&/span&img&alt=""&/&').load(function(){div.empty().append($(this));resetPos();})&&
&&&&&&&&&&&&&&&&&&&&.attr('src',c.value);&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&'url':&&
&&&&&&&&&&&&&&&&div.html('加载中...');&&
&&&&&&&&&&&&&&&&$.ajax({url:c.value,&&
&&&&&&&&&&&&&&&&&&&&&&&&success:function(html){div.html(html);resetPos();},&&
&&&&&&&&&&&&&&&&&&&&&&&&error:function(xml,textStatus,error){div.html('出错啦')}&&
&&&&&&&&&&&&&&&&});&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&'iframe':&&
&&&&&&&&&&&&&&&&div.append($('&&/span&iframe&src="'&+&c.value&+&'"&/&'));&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&'text':&&
&&&&&&&&&&&&default:&&
&&&&&&&&&&&&&&&&div.html(c.value);&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}&&
&&&&&&&&}&&
&&&&&&&&else&&
&&&&&&&&{&&&div.html(c);&}&&
&&&&this.show&=&function()&&
&&&&&&&&if(undefined&!=&options.beforeShow&&&&!options.beforeShow())&&
&&&&&&&&{&&&&&}&&
&&&&&&&&&&
&&&&&&&&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&/&100&:&1;&&
&&&&&&&&}&&
&&&&&&&&&&
&&&&&&&&if(options.modal)&&
&&&&&&&&{&&&$('#'&+&overlayId).fadeTo('slow',&getOpacity(overlayId));&&&}&&
&&&&&&&&dialog.fadeTo('slow',&getOpacity(options.id),&function(){&&
&&&&&&&&&&&&if(undefined&!=&options.afterShow){&&&options.afterShow();&}&&
&&&&&&&&&&&&isShow&=&true;&&
&&&&&&&&});&&
&&&&&&&&//&自动关闭&&&
&&&&&&&&if(0&!=&options.time){&&timeId&=&setTimeout(this.close,&options.time);&&&&}&&
&&&&&&&&resetPos();&&
&&&&this.hide&=&function()&&
&&&&&&&&if(!isShow){&&}&&
&&&&&&&&if(undefined&!=&options.beforeHide&&&&!options.beforeHide())&&
&&&&&&&&{&&&&&}&&
&&&&&&&&dialog.fadeOut('slow',function(){&&
&&&&&&&&&&&&if(undefined&!=&options.afterHide){&&&options.afterHide();&}&&
&&&&&&&&});&&
&&&&&&&&if(options.modal)&&
&&&&&&&&{&&&$('#'&+&overlayId).fadeOut('slow');&&&}&&
&&&&&&&&isShow&=&false;&&
&&&&this.close&=&function()&&
&&&&&&&&if(undefined&!=&options.beforeClose&&&&!options.beforeClose())&&
&&&&&&&&{&&&&&}&&
&&&&&&&&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&=&500;&&
Dialog.__count&=&1;&&
Dialog.version&=&'1.0&beta';&&
function&dialog(content,&options)&&
&&&&var&dlg&=&new&Dialog(content,&options);&&
&&&&dlg.show();&&
&&&&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,
// 是否跟随页面滚动。
// 自动关闭时间，为0表示不会自动关闭。
// 对话框的id，若为false，则由系统自动产生一个唯一id。
var options = $.extend(defaults, options);
options.id = options.id ? options.id : 'dialog-' + Dialog.__ // 唯一ID
var overlayId = options.id + '-overlay'; // 遮罩层ID
var timeId =
// 自动关闭计时器
var isShow =
var isIe = $.browser.
var isIe6 = $.browser.msie && ('6.0' == $.browser.version);
var barHtml = !options.showTitle ? '' :
' + options.title +
'' + options.closeText + '
var dialog = $('
'+barHtml+'
').hide();
$('body').append(dialog);
var resetPos = function()
if(options.center)
var left = ($(window).width() - dialog.width()) / 2;
var top = ($(window).height() - dialog.height()) / 2;
if(!isIe6 && options.fixed)
dialog.css({top:top,left:left});
dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()});
var init = function()
if(options.modal)
$('body').append('
$('#' + overlayId).css({'left':0, 'top':0,
'width':'100%',
'height':$(document).height(),
'z-index':++Dialog.__zindex,
'position':'absolute'})
dialog.css({'z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'});
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:0,y:0};
function moveDialog(event)
var e = window.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){ }
var e = window.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(0 != options.time){
timeId = setTimeout(this.close, options.time);
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());
case 'img':
div.html('加载中...');
$('<img ALT=""
TITLE="jQuery&Dialog弹出层对话框插件演示" />').load(function(){div.empty().append($(this));resetPos();})
.attr('src',c.value);
case 'url':
div.html('加载中...');
$.ajax({url:c.value,
success:function(html){div.html(html);resetPos();},
error:function(xml,textStatus,error){div.html('出错啦')}
case 'iframe':
div.append($(''));
case 'text':
div.html(c.value);
div.html(c); }
this.show = function()
if(undefined != options.beforeShow && !options.beforeShow())
var getOpacity = function(id)
return $('#' + id).css('opacity');
var el = document.getElementByIdx_x(id);
return (undefined != el
&& undefined != el.filters
&& undefined != el.filters.alpha
&& undefined != el.filters.alpha.opacity)
? el.filters.alpha.opacity / 100 : 1;
if(options.modal)
$('#' + overlayId).fadeTo('slow', getOpacity(overlayId));
dialog.fadeTo('slow', getOpacity(options.id), function(){
if(undefined != options.afterShow){
options.afterShow(); }
// 自动关闭
if(0 != options.time){
timeId = setTimeout(this.close, options.time);
resetPos();
this.hide = function()
if(!isShow){ }
if(undefined != options.beforeHide && !options.beforeHide())
dialog.fadeOut('slow',function(){
if(undefined != options.afterHide){
options.afterHide(); }
if(options.modal)
$('#' + overlayId).fadeOut('slow');
this.close = function()
if(undefined != options.beforeClose && !options.beforeClose())
dialog.fadeOut('slow', function(){
$(this).remove();
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 = 500;
Dialog.__count = 1;
Dialog.version = '1.0 beta';
function dialog(content, options)
var dlg = new Dialog(content, options);
dlg.show();
@charset&"utf-8";&&
.dialog-overlay&&
&&&&opacity:0.5;&&
&&&&filter:alpha(opacity:50);&&
&&&&background:&&
&&&&background:&&
&&&&padding:10&&
&&&&opacity:0.9;&&
&&&&filter:alpha(opacity:70);&&
&&&&border-radius:3&&
&&&&-moz-border-radius:3&&
&&&&-webkit-border-radius:3&&
&&&&_width:expression_r('200px');&&&
.dialog&.bar&&
&&&&cursor:&&
&&&&color:#&&
&&&&background:#000;&&
&&&&padding:6&&
&&&&min-height:15&&&
&&&&_height:expression_r('20px');&&&
.dialog&.bar&.title&&
&&&&float:&&
&&&&margin-right:10&&
.dialog&.bar&.close&&
&&&&float:&&
&&&&cursor:&&
&&&&text-decoration:&&
.dialog&.content&&
&&&&background:#&&
&&&&padding:10&&
.dialog&iframe&&
&&&&height:100%;&&
&&&&width:100%;&&
.content&img&&
&&&&overflow:&&
&&&&max-width:700&&
&&&&max-height:500&&
&&&&_width:expression_r((document.body.clientWidth&&&700)&?&'700px'&:&'auto');&&
&&&&_height:expression_r((document.body.clientHeight&&&500)&?&'500px'&:&'auto');&&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。183598人阅读
http（36）
一、JS的三种最常见的对话框
[javascript]&
二、点击按钮时常用的6中提示框和操作
三、弹出独立窗口
[javascript]&
& &参数解释：
window.open 弹出新窗口的命令；&
'page.html' 弹出窗口的文件名；&
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；&
height=100 窗口高度；&
width=400 窗口宽度；&
top=0 窗口距离屏幕上方的象素值；&
left=0 窗口距离屏幕左侧的象素值；&
toolbar=no 是否显示工具栏，yes为显示；&
menubar，scrollbars 表示菜单栏和滚动栏。&
resizable=no 是否允许改变窗口大小，yes为允许；&
location=no 是否显示地址栏，yes为允许；&
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
'newwin':隐藏菜单栏地址栏工具条&
四、弹出窗口实例演示
[javascript]&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：979541次
积分：7084
积分：7084
排名：第2877名
原创：34篇
转载：483篇
评论：38条
(1)(4)(2)(1)(3)(5)(2)(10)(1)(6)(5)(5)(18)(59)(33)(117)(24)(23)(48)(67)(27)(20)(23)(15)评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
第一章 ASP.NET 教程 （基础）
第二章 ASP.NET 教程（高级）
