防止jQuery弹出窗口在重新调整浏览器窗口时包装 [英] Prevent jQuery popups from wrapping when re-sizing browser window
本文介绍了防止jQuery弹出窗口在重新调整浏览器窗口时包装的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个jQuery弹出窗口,当你点击一个链接。弹出窗口打开和关闭正常,但我想要重新调整浏览器窗口大小时弹出窗口的位置保持固定。
I have a jQuery popup that appears when you click on a link. The popup opens and closes fine but I want the position of the popup to remain fixed when re-sizing the browser window to prevent wrapping.
我通常使用少量jQuery代码,以防止浏览器窗口重新调整大小,但在此特定实例中,它无法正常工作。
I normally use a small amount of jQuery code to prevent the browser window from re-sizing but in this particular instance it is not working properly.
jQuery防止包装的代码:
jQuery Code for preventing wrapping:
<script src="http://wcetdesigns.com/assets/javascript/jquery.js"></script>
<script>
$(document).ready(function() {
$("[class~='floatNoWrap']").each(function () {
$(this).css("width", $(this).outerWidth());
});
});
</script>
jQuery弹出式窗口代码:
jQuery Code for popups:
$(document).ready(function () {
//open popup
$("#pop").click(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
});
//open popup 2
$("#pop2").click(function(){
$("#overlay_form2").fadeIn(1000);
positionPopup();
});
//close popup 2
$("#close2").click(function(){
$("#overlay_form2").fadeOut(500);
});
//position the popup at the center of the page
function positionPopup(){
if(!$("#overlay_form, #overlay_form2").is(':visible')){
return;
}
$("#overlay_form, #overlay_form2").css({
left: ($(window).width() - $('#overlay_form, #overlay_form2').width()) / 2,
top: ($(window).width() - $('#overlay_form, #overlay_form2').width()) / 3,
position:'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
});
弹出式窗口的CSS:
#overlay_form, #overlay_form2{
font-weight:bold;
border: 2px solid;
margin: 10px 70px;
padding:35px 35px 228px 70px;
background-repeat: no-repeat;
background-position: 10px center;
width:600px;
color: #4F8A10;
background-color:#EDFCED;
position:absolute;
}
#pop, #pop2{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
推荐答案
浮动弹出窗口:
jQuery:
//position the popup at the center of the page
function positionPopup(){
if(!$("#overlay_form, #overlay_form2").is(':visible')){
return;
}
$("#overlay_form, #overlay_form2").css(("width", $(this).outerWidth())
);
}
这篇关于防止jQuery弹出窗口在重新调整浏览器窗口时包装的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文