ajax popup display center in body

Question

I want to load my popup center in body. I have tried to do that. but its not working. Here is my link : http://sriads.com/shopping/product/ (click Add to Cart button)

this script from : http://dinbror.dk/bpopup/

head style

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/scripting.min.js"></script>

Jquery

<script>
      jQuery(function ($) {

        $('.button').on('click', function () {
            var id = $(this).data('id');

            $.ajax({
                url: '/shopping/ajax.php',
                data: {
                    id: id
                },
                method: 'POST',
                success: function (html) {
                    $('body').append(html);
                    $(html).bPopup();
                },
                error: function (returnValue) {}
            });
        });


    });
</script>

button html

<button type="button" class="button small cart-button" data-id="2222">Add to Cart</button>

ajax.php file

<div id="popup">
  <div class="inner">
  <h2>Item added to your cart!</h2>
  <!-- here some html and php codes -->
  </div>
</div>

works for me, it's right in the center but this might help http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block — Jobst, Jun 29 '15 at 02:26
Post the styling code you have applied in **scripting.min.js** — Ajay Narain Mathur, Jun 29 '15 at 02:27

score 0 · Answer 1 · answered Jun 29 '15 at 05:36

0

Probably height: auto should work here.

CSS for #popup:

#popup {
  background-color: #FFF;
  box-shadow: 1px 1px 4px #000;
  display: none;
  height: auto;
  width: 450px;
  font-family: 'Roboto', Arial;
  position: absolute;
  margin: 0 auto;
}

answered Jun 29 '15 at 05:36

Dhanu Gurung

8,480
10
47
60

score 0 · Answer 2 · answered Jun 29 '15 at 06:54

0

To center a popup to screen you must have the following properties set like this -

#popup {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  width: 450px;  // Any fixed width
  height: 300px; // Any fixed height
  ............
  ............
}

answered Jun 29 '15 at 06:54

Shuvro

1,499
4
14
34

this is the way mate, maybe check in browser inspect element using whether the css is getting over ridden by some hard coded css. I saw some CSS written along with the div which I guess overriding the properties here. – Shuvro Jun 29 '15 at 17:02
http://imageshack.com/a/img901/6587/FRdQK3.png check the above link, you seems like dynamically adding the css left and top property using javascript. See how I reformatted your css by commenting out the left and top css from element style and edited the popup style – Shuvro Jun 29 '15 at 17:12
http://imageshack.com/a/img903/8722/H6rVRO.png also check this image with the changes in action. With the element css gone, even if you resize your screen the popup will just stay in the center all the time. – Shuvro Jun 29 '15 at 17:15
did you comment out the javascript code that was causing the css top and left property get updated? – Shuvro Jun 30 '15 at 07:12
need to see your css, and also as I said, the css top and left property in your code is updating from javascript, only changing css and the loading the page won't work. maybe you have somewhere in your code something like $('#popup').css({'left':'[some percent value]','top':'[some percent value]'}); which is making the top and left property get updated on page load or window resize. Comment that code out and the updated css will work. – Shuvro Jun 30 '15 at 07:24

areeb · Answer 3 · 2015-07-02T07:47:07.060

0

use jquery for center the pop up;

<script type="text/javascript" >
    $('#popup').position({
            of: $(window)
        });
</script>

edited Jul 02 '15 at 07:47

answered Jun 29 '15 at 06:58

areeb

424
3
9

under – areeb Jul 02 '15 at 07:46

ajax popup display center in body

3 Answers3