Zapobiegaj zawijaniu się popupów jQuery podczas zmiany rozmiaru okna przeglądarki - javascript, jquery, html, css

Mam wyskakujące okienko jQuery, które pojawia się po kliknięciuna link. Wyskakujące okienko otwiera się i zamyka dobrze, ale chcę, aby pozycja wyskakującego okna pozostała stała podczas zmiany rozmiaru okna przeglądarki, aby zapobiec zawijaniu.

Zwykle używam niewielkiej ilości kodu jQuery, aby zapobiec zmianie rozmiaru okna przeglądarki, ale w tym konkretnym przypadku nie działa on poprawnie.

Kod jQuery zapobiegający zawijaniu:

<script src="http://wcetdesigns.com/assets/javascript/jquery.js"></script>

<script>

$(document).ready(function() {

$("[class~="floatNoWrap"]").each(function () {
$(this).css("width", $(this).outerWidth());
});

});

</script>

Kod jQuery dla wyskakujących okienek:

$(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 dla wyskakujących okienek:

#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;
}

Odpowiedzi:

Oto kod, aby poprawić pływające wyskakujące okienka:

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())
);
}