jQuery模拟新窗口打开 轻松使用javascript创建新窗口


<!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>

相关内容