jquery ui dialog|popup 彈出窗口層
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: http://www.cnblogs.com/wangdetian168
//@email: wangdetian168@163.com
/***************************/
document.write('<div id="backgroundPopup"></div> <div id="popupContact" style="display:none;position:fixed;_position:absolute;height:384px;width:408px;background:#FFFFFF;border:2px solid #cecece;z-index:2;padding:12px;font-size:13px;"> <a id="popupContactClose">x</a><h1 id="idModalTitle" align="right"></h1><p id="idContentArea"></p></div>');
document.write("<link rel='stylesheet' type='text/css' href='general.css'>");
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
var idCloses=new Array("popupContactClose","buttonClose");
var popupModal='{idLoadHtml:"popupContact1",idModalTitle:"彈出窗口測試",isUseTitle:true,align:"center",modalWidth:"408px";modalHeight:"384px",show:function(){ centerPopup();//load popup loadPopup();}}';
//popupModal={idLoadHtml:"popupContact1",idModalTitle:"彈出窗口測試",isUseTitle:true};
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(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 enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var 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(){
//彈出層
popupModal.show=function(e)
{
centerPopup();
//load popup
loadPopup();
}
//是否顯示標(biāo)題
if(popupModal.isUseTitle){
$("#idModalTitle").html(popupModal.idModalTitle);
//alert($("#idModalTitle").attr("align"));
$("#idModalTitle").attr("align",popupModal.align);
//alert(popupModal.align);alert($("#idModalTitle").attr("align"));
}
else{
$("#idModalTitle").hide();
}
//設(shè)置窗口大小
document.getElementById("popupContact").style.width=popupModal.modalWidth;
document.getElementById("popupContact").style.height=popupModal.modalHeight;
$("#idContentArea").html(document.getElementById(popupModal.idLoadHtml).innerHTML);
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
for(var i=0;i<idCloses.length;i++)
{
$("#"+idCloses[i]).click(function(){
disablePopup();
});
}
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
genneral.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{
}
#popupContact h1{
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:6px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
測試頁面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery教程演示:JavaScript彈出窗口DIV層效果代碼--代碼吾愛 </title>
<script type="text/javascript" src="../ui-images/js/jquery-1.4.2.min.js"></script>
<script src="popup.js" type="text/javascript"></script>
<script type="text/javascript">
idCloses.push("idput");
popupModal={idLoadHtml:"popupContact1",idModalTitle:"彈出窗口測試",isUseTitle:true,align:"center",modalWidth:"800px",modalHeight:"300px"};
</script>
</head>
<body>
<center>
<p><img/ src="logo.gif" alt="點(diǎn)擊進(jìn)入代碼吾愛"/></p>
<p><img/ src="banner.bmp" alt="點(diǎn)擊進(jìn)入代碼吾愛"/></p>
<div id=""><input type="button" onclick="popupModal.show()" value="點(diǎn)擊這里查看效果" /></div>
<p></p>
<p>教程:JS彈出窗口DIV層效果代碼 </a></p>
</center>
<div id="popupContact1" style="display:none">
<p id="contactAreasss">
這就是我們創(chuàng)建的漂亮DIV彈窗效果。可以看到j(luò)Query實(shí)在是非常強(qiáng)大，我們僅需少量的CSS和JavaScript代碼即可完成這一效果。<br/><br/>
我們可以在這個彈窗之中放置一個登錄框、注冊表單、重要事件提醒等等。
<br/><br/>
要關(guān)閉這個窗口，請點(diǎn)擊右上方的X按鈕或點(diǎn)擊彈窗外的背景或按下鍵盤上的ESC鍵。
<input type="button" id="buttonClose" value="關(guān)閉" />
</p>
</div>
</body>
</html>
posted on 2010-03-25 16:53
sanmao 閱讀(5374)
評論(3) 編輯 收藏