<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="css_js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
// JavaScript Document
var popupStatus = 0;
function loadPopup() {
if(popupStatus == 0) {
$("#backgroundPopup").css({
"opacity":"0.3"
});
$("#popupContact").fadeIn("slow");
$("#backgroundPopup").fadeIn("slow");
popupStatus = 1;
}
}
function disablePopup() {
if(popupStatus == 1) {
$("#popupContact").fadeOut("slow");
$("#backgroundPopup").fadeOut("slow");
popupStatus = 0;
}
}
function centerPopup() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupWidth = $("#popupContact").width();
var popupHeight = $("#popupContact").height();
$("#popupContact").css({
"position":"absolute",
"top": windowHeight/2 - popupHeight/2,
"left":windowWidth/2 - popupWidth/2
});
}
$(document).ready(function(){
$("#button").click(function(){
centerPopup();
loadPopup();
});
$("#popupContactClose").click(function(){
disablePopup();
});
});
</script>
<style type="text/css">
#popupContact{
display:none;
position:fixed;
height:384px;
width:408px;
_position:absolute;
background-color:#ffffff;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:12px;
}
#popupContact h1{
color:#6fa5fd;
text-align:left;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #d3d3d3;
padding-bottom:2px;
margin-bottom:20px;
}
#button{
margin:100px;
text-align:center;
}
#popupContactClose{
font-size:14px;
line-height:14px;
color:#6fa5fd;
font-weight:700;
position:absolute;
cursor:pointer;
top:4px;
right:6px;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background-color:#000000;
border:1px; solid; #cecece;
z-index:1;
}
</style>
</head>
<body>
<center>
<div id="button"><input type="button" value="點擊查看效果" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>標題</h1>
<p id="contactArea">這裏是正文</p>
</div>
<div id="backgroundPopup"></div>
</body>
</html>
使用jQuery製作彈出窗口
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章