bPopup opens centre-aligned in one page and left-aligned in other

Question

I'm using the bPopup plugin to open an iframe on two separate pages.

I've written a small script which creates the iframe and "pops it up". This same script (exact URL etc) is referenced on both of my pages:

jQuery('#student_iframe_container').css({
      'display': 'none'
});

jQuery('body').on("click", ".student_iframe_popup", function() {
      jQuery('#student_iframe_container').remove();

      var popUpHTML = '<div id="student_iframe_container"><div class="b-close"><img src="/user/74/187888.png" title="Close" /></div><iframe></iframe></div>';
      jQuery('body').append(popUpHTML);

      jQuery('.b-close').css({
            'background-color': 'none',
            'padding': '8px',
            'font-size': '14px',
            'font-weight': 'bold',
            'width': '52px',
            'text-align': 'center',
            'cursor': 'pointer',
            'overflow' : 'auto'
      });

      jQuery('iframe').css({
            'margin': '0px auto',
            'background-color': 'none',
            'border': 'none'
      });

    var student_id = 'student_' + jQuery(this).attr("id");

    jQuery('iframe').attr("width", 800);
    jQuery('iframe').attr("height", 670);
    jQuery('iframe').attr("id", student_id);
    jQuery('iframe').attr("src", '/index.phtml?d=825090');

    jQuery('#student_iframe_container').bPopup({
            position: ['auto', 2]
      });
});

The idea of this script is that I can whack <a href="javascript:void(0);" class="student_iframe_popup" id="123456">student</a> into my pages and the script will do the rest.

On both of my pages the pop-up iframe works correctly. The issues lies with alignment: on one page the iframe correctly appears horizontally centre-aligned but on the other it appears left-aligned.

Correct alignment on Assign Flags page

Incorrect alignment on My Flags page

If I look at the HTML in FireBug it's fairly messy:

Assign Flags:

<div class="b-modal __b-popup1__" style="background-color: rgb(0, 0, 0); position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.7; z-index: 9998; cursor: pointer;"></div>
<div id="student_iframe_container" style="left: 48.5px; position: absolute; top: 2px; z-index: 9999; opacity: 1; display: block;">
    <div class="b-close" style="padding: 8px; font-size: 14px; font-weight: bold; width: 52px; text-align: center; cursor: pointer; overflow: auto;">
        <img title="Close" src="/user/74/187888.png">
    </div>
    <iframe width="800" height="670" style="margin: 0px auto; border: medium none;" id="student_138871" src="/index.phtml?d=825090"></iframe>
</div>

The student_iframe_popup class is used in this segment of HTML:

<li>
    <a id="138929" class="student_iframe_popup" href="javascript:void(0);">Student Name</a>
    <div>23<img alt="Red Flags" src="/user/74/187894.png">&nbsp;0<img alt="Interventions" src="/user/74/187895.png"></div>
</li>

My Flags:

<div class="b-modal __b-popup1__" style="background-color: rgb(0, 0, 0); position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.7; z-index: 9998; cursor: pointer;"></div>
<div id="student_iframe_container" style="left: 0px; position: absolute; top: 2px; z-index: 9999; opacity: 1;">
    <div class="b-close" style="padding: 8px; font-size: 14px; font-weight: bold; width: 52px; text-align: center; cursor: pointer; overflow: auto;">
        <img title="Close" src="/user/74/187888.png">
    </div>
    <iframe width="800" height="670" style="margin: 0px auto; border: medium none;" id="student_138978" src="/index.phtml?d=825090"></iframe>
</div>

The student_iframe_popup class is used in this segment of HTML:

<tr class="open">
    <td class="student">
        <a id="138978" class="student_iframe_popup" href="javascript:void(0);">Student Name</a>
    </td>
    <td>2nd Oct 2013</td>
    <td>10:24am</td>
    <td>IT Misuse</td>
    <td>Behaviour Unit</td>
    <td>Registration</td>
    <td>Referred to tutor</td>
    <td id="1994"><select><option value="O">Pending</option><option value="C">Completed</option></select></td>
    <td rowspan="2" class="centre"><img title="Notify administrator of mistake made on Flag given to Joshua Nichol?" src="/user/74/187888.png" id="1994"></td>
</tr>

Associated CSS:

#container table { width: 100%; }
#container table img { width: 16px; }
#container th { text-align: left; border-bottom: 2px solid #999; padding-bottom: 2px; text-transform: uppercase; font-weight: normal; font-size: 10px; }
#container tr.open { background-color: #ffd6d6; }
#container tr.no_action { background-color: #ffead6; }
#container td { padding: 8px 0 4px 0; font-size: 12px; }
#container tr.border td {  border-bottom: 1px solid #999; padding: 4px 0 8px 0; font-size: 11px; }
.student { font-weight: bold; padding-left: 5px; }

Obviously the discrepancy lies with these lines:

Right...

<div id="student_iframe_container" style="left: 48.5px; position: absolute; top: 2px; z-index: 9999; opacity: 1; display: block;">

Wrong...

<div id="student_iframe_container" style="left: 0px; position: absolute; top: 2px; z-index: 9999; opacity: 1;">

However, it isn't me that's writing those styles - it's bPopup. Neither of my pages have any CSS styles relating to bPopup; the only ones I'm changing are those in the JavaScript file at the top of this post.

Does anyone know, therefore, why bPopup decides to left:0px on one page and left:48.5px on another?

Answer 1

Try adding a width to your div in your javascript:

var popUpHTML = '<div id="student_iframe_container" style="width:800px"><div class="b-close"><img src="/user/74/187888.png" title="Close" /></div><iframe></iframe></div>';

(Of course you could use a class for that div. Using the style within the div is just a quick test.)

In bPopup the code to get the horizontal position is

hPos = fixedHPos ? o.position[0] : (wW - $popup.outerWidth(true)) / 2

Your wW (window width) is about equalling your popup width. If you set the popup width in the div, I think it will fix it.

Answer 2

Ok, it's late but I've started to look into this.

I've managed to crudely get your HTML, jQuery and CSS in a jsFiddle. It ain't pretty!

Note that in my fiddle I have added:

style="position:absolute;"

in the "popUpHTML" variable. When you click on "Student name" the popup is rendered centrally, which (I think) is what you want?

Without doing this I found that bPopup behaved weirdly (a potential bug with bPopup?), though I was not entirely sure if what I was seeing was the issue you are having. If you remove the style I added to the popUpHTML string and press the link, the popup gets drawn to the left side of the screen. However if you then adjust the viewport in jsfiddle (i.e. the bottom right pane) the position of the popUp is changed, as this seems to trigger bPopup's position calculation.

Hence it could be that to solve your problem you need to explicitly set a position style in the student_iframe_container div which you render via "popUpHTML".