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>

首页 / 操作系统 / Linux / jQuery模拟新窗口打开 轻松使用javascript创建新窗口

首页 / 操作系统 / Linux / jQuery模拟新窗口打开轻松使用javascript创建新窗口