If you have jQuery available anyway why not make full use of it?
You can add a click
event in jQuery like this:
$('.vpb_general_button').click(function(event) {
event.preventDefault();
vpb_show_login_box($(this).data('popup-type'));
});
In your HTML add a data-attribute
to specify the popup type and remove the onclick
attribute and replace the href
value with a #
:
...
<td>
<a href="#" data-popup-type="detail" class="vpb_general_button">Client Detail</a>
<a href="#" data-popup-type="project" class="vpb_general_button">Client Project</a>
</td>
...
In your vpb_show_login_box
function handle the different popup types. For example:
function vpb_show_login_box(popupType) // add popupType here
{
...
if (popupType === 'detail') {
$("#vpb_login_pop_up_box").load("login_detail.html");
}
if (popupType === 'project') {
$("#vpb_login_pop_up_box").load("login_project.html");
}
...
}
Update after comment
If you need to use the login.html
for the different popups you can add the parameter to the URL. But you need to handle the popupType paramater in your login.html
(here is an example).
function vpb_show_login_box(popupType) // add popupType here
{
...
$("#vpb_login_pop_up_box").load("login.html?popupType=" + popupType);
...
}
Update 2
With callback function:
function vpb_show_login_box(popupType)
{
...
$("#vpb_login_pop_up_box").load("login.html", function() {
if (popupType === 'detail') {
$('.detail-container').show();
}
if (popupType === 'project') {
$('.project-container').show();
}
});
...
}