dinbror / bpopup Goto Github PK

As seen here: http://i.gyazo.com/da049455edad9059670a0e724d7faa48.png
The bPopup loads moved sometimes and in some browsers, is there a way to center it 100% of the time.

Thanks in advance!

See bower.json:

"name": "bLazy",
"main": "bLazy.js",

etc

The iframe popup which loads a page into the popup doesn't show scrollbar, horizontal nor vertical. If the page is larger or higher than the visible part, you can't scroll the iframe content and see the right/bottom part of the page.

Bug is also visible on demo page. Into the iframe, do a search (type some word and hit enter) you get the result page but can't see the results of the search.

Hello, dinbror,

First of all, thank you very much for providing such a nice component. I really love it.

I'd like to ask you for some help: is there any way to center its content vertically? I have some lines of a message to display but cannot center it.

Let's assume this is the content:

<div id="element_to_pop_up">
        <div id="content">Some text
        some<br/>
        text<br/>
        here<br/>
        ...<br/>
         </div>
</div>

I don't know size of the content. I've tried to add another container and use display:table and table-cell with vertical-align:middle:

<div id="element_to_pop_up">
        <div id="becomes_a_table">
            <div id="content_becomes_a_table_cell">Some text
        some<br/>
        text<br/>
        here<br/>
        ...<br/>
          </div>
       </div>
</div>

But I cannot set the "table" div's height to 100% of the popup. It doesn't resize to fill the parent entirely. Thus, I can see only a small div with my text in the left upper corner of a bPopupped div. The content is centered inside the table, but the table doesn't expand to a whole container.

Could you provide a simple example on how to center vertically some strokes of a text inside?

I want to make a dynamic popup with url. For the first time pop up is working fine. But after closing the popup, pop up is not woking. I only get the message in console like "Uncaught TypeError: Object [object Object] has no method 'bPopup'"

Here is my code:

    jQuery('.entry-link-pop').bind('click', function(e) {
    var url = jQuery(this).attr('link');
           // Prevents the default action to be triggered. 
           // e.preventDefault();

           // Triggering bPopup when click event is fired
           jQuery('#element_to_pop_up').bPopup({loadUrl: url});
           // return false;
     });

Thanks in advance.

Hi,

I hope this gets submitted to the correct section.
Basically I am writing an image uploader that goes into the popup, when the image is uploaded it is displayed inside the popup.

How would I make it recenter once the image is in there?

Thanks,
Steve

Hi, I want to use bpopup to show onloading information, which means the message div popup when the sending the request to API for some analysis, and it will disappear after the request come back with some results. How to make the popup div disappear in jquery code?

Hello;
I've been using bpopup plugin and it's amazing... lately I'm facing a problem with preventing "Esc" button from closing the popup layer... i want closing to be done programmatically by me ... not by the user under any circumstance.

thank you so much

Version 0.9.x always resizes the popup to its content at startup (or sort of), while I need the popup to leave the container dimensions INTACT.

This worked for 0.8.0.

Can you at least make this thing an option?

Hi,
Is there a way to know which popup is opened? I tried to find a class or something like that, but with no success. I did it manually via adding before opening and removing on a onClose() event, but the code gets a bit ugly. And when we have many popups that can be opened, this would help a lot.

Thanks

Hi,

bpopup works great! :)
I'd like to know what license you distribute the code with so I can use it.

Thanks again.
Chris.

It's very useful script for me. really thanks.

I have a question.

I'm using bpop to like this.
http://skin-skin4.uscalvin.cafe24.com/test2.html

This popup appear when index is loaded.(click ->load)

And I hope just appear it only once a day automatically.

How to add code?

If you have some code suggestion it would be fine!

Thanks!

I modified copy of mine:

                default:
                    open();
                    $('<div class="b-ajax-wrapper"></div>')
                        .load(o.loadUrl, o.loadData, function(response, status, xhr) {
                            triggerCall(o.loadCallback, status, response);
                            recenter($(this));
                        }).hide().appendTo(o.contentContainer);
                    break;

And

        function triggerCall(func, arg1, arg2) {
            $.isFunction(func) && func.call($popup, arg1, arg2);
        };

Hello,

I am encountering an issue with my site where the opacity layer behind the popup doesn't go away when i close the popup.

I have an ecommerce site and a user can edit their items in their cart. when they edit an item, a popup shows up that has the form to edit an item. the div that contains the form has a unique ID that i use with bpopup to open/close it. When i only have 1 item in my cart, everything works. However, when i have 2 or more items, when i close the popup, the opacity layer still exists. The popup opens and closes, so its not an issue with the identifier that's being used. If you want to mess around with the bug, the website is www.mgxcopy.com. Add any two items to the cart, edit one of them, then click ok, and you'll see the bug.

Hi i have implemented this bPopup and its working for even multiple links. When i open new popup again and again new popup is opening but old popup is not closing immediately. So all new popup opens above the old popups. But i want to close all other popups immediately before new opens.

Hi everyone,

I would like to 'auto' close a bpopup window after 2s. Here my code

$('#popupWindow').html( 'hello world' );
$('#popupWindow').bPopup();
setTimeout(
    function(){
        $('#popupWindow').bPopup().close();
        }
    ,2000
);

The bpopup window is shown correctly, blinks avec 2s but remains on screen. :(

Thanks for your help.

I am not able to set cache: false in bpopup. As work-around, I a time as url suffix.

When the popup window height is greater than the window height,
horizontal center is not work
{
follow: [true,false],
position:['auto',0],
}

hi friends,

i use tinyMCE for html content display/add/write, it's working on normal page but when i put it in bpopup it will not make a writabe to tinyMCE.

I have not found the license notes.
Can you notes the license of bpopup?
Thanks.

Might be a good idea to add a 2nd parameter to the reposition() function to allow forcing of reposition, even if the popup isn't completely inside the window. Currently the function will only work if the popup is completely inside the window, which isn't always ideal, when for example, the height of the content of the popup has changed.

E.g. I load the popup and it sits 100px high in the middle of a mobile screen. I then pull in some other content via AJAX and the content is now 700px high, but reposition() won't fire because the popup is taller than the screen of the mobile. So instead, the popup sits in its original position, with its top edge in the middle of the screen and overflows well off the bottom of the screen.

What would be better is if we could force the reposition to fire, after the new content has been loaded, which would then move the popup to the top of the screen at least.

I am using the 0.11 version, and I have multiple popups on a page which contain an edit form to an element in the loop, but if I close the popup, then it is deleted from the dom, and cannot be opened again without page refresh.

Hey, maintainer(s) of dinbror/bpopup!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library dinbror/bpopup is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "dinbror/bpopup",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi,

As various other people I have the problem that the popup is not getting centered.
Here is live example: http://rentme.3dprinteroutlet.net/forrent/63/92

Its not properly centered in any of the latest browsers of Chrome, FF, IE.

Bpopup version 0.11

Thanks!

have you thought about adding an option to prevent the parent page from scrolling when the popup is displayed?

need autoscroller in iframe

Hi developer's

I want to user Example 6a, misc: Multiple jQuery popups (Never ending popup, how many can you pop up?) this popup in my project. Can u gaude me how to use this in my project. I am tried to implament this.

When I open the popup in the first click is not centralize, after the popup is in the center. How can I resolve it?

I saw the the Popup is not working with IE11. The window will not open. I Use an Iframe in it, i dont know if this is the problem or any other Bug with IE11.

Is there any Solution?
Thanx, P

Just using the default .bPopup(); method, the popup appears incorrectly like this the first time:

But appears correctly every subsequent time:

No errors are generated in the console.

Hi, great plugin, can you consider implementing beforeOpen and beforeClose callbacks in addition to onOpen and onClose?

Thanks.

It appears that the click is no longer working on the same element after I have closed the modal window. Is anyone else experiencing this?

Using onClose option and setting a mine function bPopup losts who had called the event. I think that it's an important information because i can decide to make different action for different close event.

Or if it's possible, how i can found that information?

I would insert a form inside bpopup which when the user click on submit button, ajax must do something and return with some info. At the moment i didn't understand what's happen but the function that i have setted on ajax post is never called and every time the response returns to the main page where bpopup is called.

Hi,

I just like to know what way you would recommend to implement a specific close button (cancel in reality) into a form contained into an iframe of a bpopup ? Because the style b-close has no effect in that case.

Thank you in advance.

I think it will be useful to allow the positioning of the popup to the right.

I think it could be possible to use the negative values for position option to allow that:

position:[-10,'auto'] -----> put the popup 10px right to the right margin of the window

...

Trying to use on a tablet enabled site, and android's default browser on galaxy tab doesn't respect the z-index of the bg and modal content. This shows the bg over top of the modal instead of the other way around. Could be fixed by wrapping the modal content inside the .b-modal div instead of dropping the .b-modal div before it.

Hello,

I can't get this working. Can anyone point me to the right direction? Thanks!

var self = $(this) //button
, content = $('.content');

    $('element_to_pop_up').bPopup({
        onOpen: function() {
            content.html(self.data('bpopup') || '');
        },
        onClose: function() {
            content.empty();
        }
    });

I am trying to pass data through bPopup to my .aspx.vb file. i am pulling the data through Request.QueryString. However Request.QueryString is not picking up the data.

Here is my bPopup call:

$('#bPopup_div').bPopup({
   loadUrl: 'testfile.aspx'
   , loadData: (['Name', Name], ['Id', Id])
})

Here is my VB.NET in testfile.aspx.vb:

Dim Id As String = Request.QueryString("Id")
Dim Name As String = Request.QueryString("Name")

Can you tell my why Id and Name are Nothing? Am I not passing my parameters correctly or not pulling them correctly?

I am using bpopup to add data in my page. For this I have an add Button in the popup. But on clicking on close/add, same functions are called i.e. bpopup.close(). I want to cancel the submission on close while submission only on Add button

Hi there,

Is it possible to popup a Laravel 4 blade template view?
I have looked at:
$('element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.html' //Uses jQuery.load()
});
but not sure why having the "element_to_popup" selector?
I do not want to popup the element contents. But an true external blade template view.

If I may give an example by means of pseudo code:
function showCreateCarsWindows() {
$().popup({
url: '/views/cars/create.blade.php
}).onClose(function({
//get the new carid (PK) that was inserted and select it in my select list (dropdown) as default
});
}

Please advise :)

Thanks in advance

Hi,
in the code you are using 'y.innerWidth || d.width()' which return different values when scrollbar is on the page.

so popup doesn't end up perfectly centered.

Tested with:
jQuery 1.10.2
FF - 24.0

Studying the code, I think I saw that starting vPos for a slideDown-effected popup was its ending vPos minus its height. But if popup height is quite small and/or window height quite big, popup's bottom is visible when starting sliding down effect and then, effect is not a full sliding down (i.e. from out-of-screen to screen) anymore.
But maybe this is a normal behaviour for you.
In any case many many thanks for this beautiful tool.

I use bPopup mainly to display AJAX content in popups. I use the plugin Jquery Address to make the whole ajax content SEO-viable.

To allow forward/back browser button usage, I needed to programatically close the bPopups (for instance, if a popup is open, and you hit the back button, it will close the popup and show the main page). I noticed that using the .Close function when a bPopup is NOT open, it will still try to animate the fadeTo transition.

I've narrowed it down to Line 315:

if (o.modal) {
$('.b-modal.'+$popup.data('id'))
.fadeTo(o.speed, 0, function() {
$(this).remove();
});
}

By removing the .fadeTo funtion and just using the remove function I have noticed no problems anymore, it won't show the animation from "black" to transparent transition.

Just thought I would mention it, it is not a huge issue, but maybe worth looking into an alternative fix.

And sorry if this is in a wrong format/section, I'm relatively new to github :)

Horizontal centering works fine if there's no scrollbar. However, if there's a scrollbar, it won't center anymore because it seems that the scrollbar is not included when calculating the window size.

Screenshot:

Additional Note:
Works fine in mobile since it's scrollbar is not visible as the desktop browsers.

I am using bPopup on 3 different sites and it happens to all of them. In the latest version of chrome, when you trigger the popup the opacity layer remains invisible.

If you open dev tools to inspect it, or resize the window even 1px it will instantly appear.

This is an issue after window resize.

Hello,

I just discovered that the recenter function uses the incorrect height and width (the ones used in css.height and css.width). If you have a padding or margin on the popupBox div, then the padding will be subtracted from the real size resulting in the box being the amount of left and right padding smaller in width and the amount of top and bottom padding smaller in height.

To fix this, please change the recenter function to the following:

if (_height >= $popup.outerHeight(true)){
css.height = $popup.outerHeight(true);
}
if(_width >= $popup.outerWidth(true)){
css.width = $popup.outerWidth(true);
}
height = $popup.outerHeight(true)
, width = $popup.outerWidth(true);

Thanks in advance!