弹出div窗口进行图片上传操作思路

html代码：

x

图片上传窗口

js代码：/***************************///@Author: Adrian "yEnS" Mato Gondelle//@website: www.yensdesign.com//@email: yensamg@gmail.com//@license: Feel free to use it, but keep this credits please!/***************************///SETTING UP OUR POPUP//0 means disabled;
1 means enabled;var popupStatus = 0;//loading popup with jQuery magic!function loadPopup(){//loads popup only if it is disabledif(popupStatus==0){$("#backgroundPopup").css({"opacity": "0.7"});$("#backgroundPopup").fadeIn("slow");$("#popupContact").fadeIn("slow");popupStatus
= 1;}}//disabling popup with jQuery magic!function disablePopup(){//disables popup only if it is enabledif(popupStatus==1){$("#backgroundPopup").fadeOut("slow");$("#popupContact").fadeOut("slow");popupStatus = 0;}}//centering popupfunction centerPopup(){//request
data for centeringvar windowWidth = document.documentElement.clientWidth;var windowHeight = document.documentElement.clientHeight;var popupHeight = $("#popupContact").height();var popupWidth = $("#popupContact").width();//centering$("#popupContact").css({"position":
"absolute","top": windowHeight/2-popupHeight/2,"left": windowWidth/2-popupWidth/2});//only need force for IE6$("#backgroundPopup").css({"height": windowHeight});}//CONTROLLING EVENTS IN jQuery$(document).ready(function(){//LOADING POPUP//Click the button event!$("#button").click(function(){//centering
with csscenterPopup();//load popuploadPopup();});//CLOSING POPUP//Click the x event!$("#popupContactClose").click(function(){disablePopup();});//Click out event!$("#backgroundPopup").click(function(){disablePopup();});//Press Escape event!$(document).keypress(function(e){if(e.keyCode==27
&& popupStatus==1){disablePopup();}});});css代码：html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,font, img, ins, kbd, q, s, samp, small, strike, strong, sub,
sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border:0pt none;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0pt;padding:0pt;vertical-align:baseline;}body{background:#fff
none repeat scroll 0%;line-height:1;font-size: 12px;font-family:Tahoma,arial,sans-serif;margin:0pt;height:100%;}table {border-collapse:separate;border-spacing:0pt;}caption, th, td {font-weight:normal;text-align:left;}blockquote:before, blockquote:after, q:before,
q:after {content:"";}blockquote, q {quotes:"" "";}a{cursor: pointer;text-decoration:none;}br.both{clear:both;}#backgroundPopup{display:none;position:fixed;_position:absolute; /* hack for internet explorer 6*/height:100%;width:100%;top:0;left:0;background:#000000;border:1px
solid #cecece;z-index:1;}#popupContact{display:none;position:fixed;_position:absolute; /* hack for internet explorer 6*/height:600px;width:800px;background:#FFFFFF;border:2px solid #cecece;z-index:2;padding:12px;font-size:13px;}#popupContact h1{text-align:left;color:#6FA5FD;font-size:22px;font-weight:700;border-bottom:1px
dotted #D3D3D3;padding-bottom:2px;margin-bottom:20px;}#popupContactClose{font-size:14px;line-height:14px;right:6px;top:4px;position:absolute;color:#6fa5fd;font-weight:700;display:block;}#button{text-align:center;margin:100px;}