<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#oButton").click(function(){
openwin.getWin();
});
});
var openwin = {};
openwin.getWin = function(){
var obj = $("#open");
//是否已經新開窗口
if(obj.html() != '' ){
openWindow = $("#newWindow");//存在窗口
openWindow.slideToggle("slow");//顯示效果
}else{
//模擬彈出窗口樣式
var openWindow = $(openwin.getHtml());//不存在窗口
//定義CSS樣式 模擬關鍵 自定義設置CSS樣式
var obj = $("#oButton"); //獲取對象
var offset = obj.offset(); //獲取對象元素的位置
var right = offset.left+obj.width(); //獲取對象元素的寬度
var down = offset.top+obj.height(); //獲取對象元素的高度
openWindow.css({
'font-size':'12px',
'position':'absolute',
'margin':'20px',
'left': right,
'top':' down',
'width':'300px',
'background-color':'#f0f5FF',
'border': '1px solid #000',
'z-index': '50',
'padding':'10px'});
openWindow.appendTo($("#open"));
}
//綁定單擊事件 確定
openWindow.find("#show").click(function(){
openwin.showWindow();
}).end();
//綁定單擊事件 關閉
openWindow.find("#closed").click(function(){
openwin.closeWindow();
}).end();
}
//獲取窗口頁面元素 模擬窗口
openwin.getHtml = function(){
//自定義頁面元素，樣式，大小等
html = '<div id="newWindow">';
html += '<p>jQuery彈出窗口</p>';
html += '<p>網站：<input type="text" name="" value="必優博客biuuu.com" /></p>';
html += '<p><button id="show">確定</button> <button id="closed">關閉</button></p>';
html += '</div>';
return html;
}
//確認事件
openwin.showWindow = function(){
$("#newWindow").hide();
}
//關閉事件
openwin.closeWindow = function(){
$("#newWindow").hide();
}
//-->
</script>
</head>
<body>
<br />
<br />
<p>ddfdfdf</p>
<button id="oButton">彈出窗口</button>
<div id="open"></div>
</body>
</html>