How to align a popup center of window

Question

Hello Friends i am just trying to add a facebook popup like box to blogger blog, So i have one problem. i want popup appear center of the webpage with position absolute..below is the code which is i am using.. thanks in advance..

<style type='text/css'>
#exepopup {
    background-color: none;
    position:absolute;
    z-index: 9999;
    display: none;
    padding: 0px;
    border: 10px solid rgba(82, 82, 82, 0.7);
    -webkit-background-clip: padding-box;
 /* for Safari */
    background-clip: padding-box;
 /* for IE9+, Firefox 4+, Opera, Chrome */
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    width: 40%;
    height: 50%;
    overflow: auto;
  /* Recommended in case content is larger than the container */

  margin: auto;
  /* Center the item vertically &amp; horizontally */
  /* Break it out of the regular flow */

  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* Set the bounds in which to center it, relative to its parent/container */
}

#exepopup span {
    font-size: 12px !important;
    font-weight: normal !important;
}

#exepopup h1 {
    background: #6d84b4 url(http://4.bp.blogspot.com/-wbOyGFuANTQ/UVF1F4ouC4I/AAAAAAAABiA/RX4jNlICbjM/s1600/aktechz-fb-lock.png) 98% no-repeat;
    border: 1px solid #3b5998 !important;
    color: #FFFFFF !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 5px !important;
    margin: 0 !important;
    font-family: arial !important;
    overflow: hidden !important;
}

.exepopupdata {
    font-size: 12px !important;
    font-weight: normal !important;
    height: 275px !important;
    padding: 1px !important;
    background: #fff !important;
    border-bottom: 2px solid #ddd;
    overflow: show !important;
}

#exepopupfooter {
    text-align: left;
    font-size:12px;
    background: #F2F2F2 !important;
    height: auto !important;
    padding: 10px 10px 10px 10px !important;
    overflow: hidden !important;
}

#exepopupclose {
    float: right;
    background-color: none !important;
    border: 0px solid #ccc !important;
    color: #111 !important;
    font-weight: normal !important;
    padding: 5px 8px 5px 8px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-family: arial !important;
    outline: none !important;
    font-size: 12px !important;
    margin: 0px !important;
}

#exepopupclose:active {
    top: 0;
    left: 0;
}</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function exepopupfunc()  {
var sec = 60
var timer = setInterval(function() {
$("#exepopupfooter span").text(sec--);
if (sec == 0) {
$("#exepopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var exepopupwindow = jQuery(window).height();
var exepopupdiv = jQuery("#exepopup").height();
var exepopuptop = jQuery(window).scrollTop()+50;
jQuery("#exepopup").css({"top":exepopuptop});}
jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)
//alert(jQuery.cookie('sreqshown'));
//var exepopupww = jQuery(window).width();
//var exepopupwww = jQuery("#exepopup").width();
//var exepopupleft = (exepopupww-exepopupwww)/2;
var exepopupleft = 500;
//var exepopupwindow = jQuery(window).height();
//var exepopupdiv = jQuery("#exepopup").height();
//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;
jQuery("#exepopup").animate({opacity: "1", left: "0" , left:  exepopupleft}, 0).show();
jQuery("#exepopupclose").click(function() {
jQuery("#exepopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="exepopup">
<h1>Join Us On Facebook</h1>
<div class="exepopupdata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FEXEIdeas2010&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=260" scrolling="no" frameborder="0" style="border:none; overflow:show; width:400px; height:250px;" allowtransparency="true"></iframe></center></div>
<div id="exepopupfooter">Please Wait <span>20</span> Seconds<a href="#" id="exepopupclose" onclick="return false;">Close X</a></div></div>

Cyclonecode · Answer 1 · 2014-11-06T13:35:53.060

You can create a simple resize function like this:

function resize(popup) {
  var y = $(window).scrollTop();
  var winH = $(window).height();
  var winW = $(window).width();
  popup.css('top', y + 20);
  popup.css('left', winW/2-popup.width()/2);
}

You should also call the above function when ever the browser window is resized:

$(document).ready(function() {
  $(window).resize(function() {
    resize($('#popupexe'));
  });
});

score 0 · Answer 2 · answered Nov 06 '14 at 13:34

0

just remove this css style for #exepopup:

bottom: 0;
right: 0;

answered Nov 06 '14 at 13:34

dm4web

4,504
1
12
20

score 0 · Answer 3 · answered Nov 06 '14 at 13:52

0

A working JSFIDDLE example:

http://jsfiddle.net/fixit/u8tbhhse/

Using Style - absolute with left: 50% of the element and setting it in the middle by margin-left:-[half of the element size]

answered Nov 06 '14 at 13:52

Yonatan Ayalon

1,769
16
19

Hello Sir THanks for your valuable answer.. please tell one thing more, how can disable popup on mobile view.. using jquery or anything else.. – Muhammad Ishtiaq Nov 06 '14 at 15:43
You can check if the device is mobile and not display the popup; Answer for device check: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery Example: $.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())); – Yonatan Ayalon Nov 06 '14 at 16:28

How to align a popup center of window

3 Answers3