Whenever a link is clicked, a jQuery popup appears. The popup functions properly in terms of opening and closing, but I would like to ensure that its position remains fixed when resizing the browser window to avoid any wrapping issues.
Typically, I use a small snippet of jQuery code to prevent browser window resizing problems; however, it seems to be ineffective in this specific scenario.
The following is the jQuery code used to prevent 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>
This section contains the jQuery code for the popups:
$(document).ready(function () {
// Opening Popup
$("#pop").click(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});
// Closing Popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
});
// Opening Popup 2
$("#pop2").click(function(){
$("#overlay_form2").fadeIn(1000);
positionPopup();
});
// Closing Popup 2
$("#close2").click(function(){
$("#overlay_form2").fadeOut(500);
});
// Positioning 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'
});
}
// Maintaining the Popup at the Center of the Page When Browser Resized
$(window).bind('resize',positionPopup);
});
This segment provides the CSS styles for the popups:
#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;
}