/ / Impedir que os pop-ups do jQuery se quebrem ao redimensionar a janela do navegador - javascript, jquery, html, css

Impedir pop-ups do jQuery de quebrar ao redimensionar a janela do navegador - javascript, jquery, html, css

Eu tenho um pop-up jQuery que aparece quando você clicaem um link. O pop-up abre e fecha bem, mas eu quero que a posição do pop-up permaneça fixa ao redimensionar a janela do navegador para evitar quebra.

Eu normalmente uso uma pequena quantidade de código jQuery para evitar que a janela do navegador seja redimensionada, mas, neste caso específico, ele não está funcionando corretamente.

Código jQuery para evitar empacotamento:

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

<script>

$(document).ready(function() {

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

});

</script>

Código jQuery para pop-ups:

$(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 para pop-ups:

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

Respostas:

0 para resposta № 1

Aqui está o código para corrigir os pop-ups flutuantes:

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