If you’re using bPopup version 0.3.6 you can use “loadUrl” to load the selected video. E.g:

Scripting:
$(document).ready(function() {
$('.anchorLink').bind('click', function(e) {
e.preventDefault();
var linkToVideo = $(this).attr('href');
$('#hidden_div').openPopup({loadUrl: linkToVideo});
});
});


HTML:
< a href="Link to video" class="anchorLink">Click Here< /a>
< div id="hidden_div">< /div>


I have several hidden DIVs on the load of the page. Once a link is clicked it shows one of four videos.

I have called the video into the window inline and through the use of another page, neither work. Is there something that I can add to the close function to destroy the modal completely without removing it from the DOM? I want users to be able to be able to play the video again if necessary.

Mange tak – Hvis du har et live eksempel må du meget gerne vise det
God weekend

Det her er et fantastisk arbejde! Klap dig selv på skulderen, og bliv ved med det gode arbejde!

@Andrew:
Hey Andrew. Glad you like it. If you’re playing with asp(x) sites I would recommend to append it to ‘form’. As default it appends to body.

FROM THE API
appendTo [string] (’body’): Element to append popup (and modal overlay) to. For asp.net sites append to ‘form’.

The code prior to opening the popup:

The code as viewed from developer tools in IE8 after the popup is displayed:

I’m unable to place the form inside the popup div as there are other form controls outside the popup. Is there an option I can set to stop the code relocating my div?

Thanks in advance!

Firstly, I need to set a different position on the x axis everytime i do a poup. Because the images are loaded dynamically depending on what I clicked. Is this possible?.

Secondly, Im trying to do a “Forgotten Password” bPopup. Which is fine, but is there a way to do the postback once the bpopup has closed? Because at the moment, it will just dissapear and doesnt get to fade.

Thanks, and awesome work!

Bill :

@dinbror I’ve dropped this into my script but it’s not closing the popup.

$(document).ready(function(){
$(”a#badar”).bind(’click’, function(){
$(”#badar_popup”).openPopup({modal:true, modalColor:’#333′, opacity:.5});
});

$(’#bModal’).bind(’click’, function() {
$(’.bClose’).closePopup();
});
});

Can you see anything I’m doing wrong? Thanks!

Hey Bill.
You have to use live instead of bind to ensure that the click event is there:

$('#bModal').live('click', function() {
$('.bClose').closePopup();
});

The reason is that the element (#bModal) first will be created when you open the popup (after the document is ready and the events are declared). Otherwise you need to include the overlay div in the document from the beginning.
I’ll include the feature in the next update!

Lanre :

Please how do i implement this directly on a link. e.g
< a href="#">Open popup< /a>

Hey Lance.
You need to give your anchor a click event e.g:

< script type="text/javascript">
$(document).ready(function(){
$('a').bind('click', function(){
$('#Element_to_open').openPopup();
});
});
< /script>