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

jQuery模拟新窗口 打开比直接打开一个新窗口更加实用，而且交互效果更强，能模拟出各种丰富的页面效果，减少获取父元素或子元素的麻烦，提高代码效率和质量，轻松实现 javascript创建或弹出新窗口功能，为了工作方便，总结jQuery新窗口打开的功能，实例如下，供参考。

实例
一，Html部分

<button id="oButton">弹出窗口</button>
<div id="open"></div>

二，javascript部分

<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样式
openWindow.css({
'font-size':'12px',
'position':'absolute',
'margin':'20px',
'left':'50px',
'top':'20px',
'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>

三，实例效果图

实现机制：
一，生成新窗口页面元素，如：openwin.getHtml()方法
二，给新窗口页面增加CSS样式，实现模拟新窗口打开效果，如：openWindow.css({})部分
三，将新窗口元素添加到所需要的html盒子中，如：<div id="open"></div>
四，绑定单击事件，如确定(openwin.showWindow)，关闭按钮(openwin.closeWindow)
五，如果新窗口存在，则直接显示新窗口

过 程非常简单，了解jQuery模拟新窗口打开原理，对于实现javascript创建新窗口功能非常方便，扩展性也非常强，实际上是将元素的显示方式进行 调整，有利于调用页面元素，模拟出打开新窗口效果。综合实例可知，使用jQuery模拟新窗口打开效果轻松使用javascript创建新窗口功能。

转载自 必优博客 http://www.biuuu.com/