Jquery: Open a html window in popup jquery

Question

I). I was trying to open a new html page in popup window. Popup window is for login into database I tried using a sample Popup Sample but it didn't word. Below is my code which I was trying:

Menu.html

<table>
   <tr>
     <td>
        <a href="vpb_show_login_box()" class="vpb_general_button">Login</a>
     </td>
   </tr>
</table>

Changes in jquery:

function vpb_show_login_box()
{
    $("#vpb_pop_up_background").css({
        "opacity": "0.4"
    });
    $("#vpb_pop_up_background").fadeIn("slow");
    $("#vpb_login_pop_up_box").fadeIn('fast');
    $("#vpb_login_pop_up_box").load("login.html");
    window.scroll(0,0);
}

May I know what mistake I am doing?

II). Also I have another question. I have two different database. One Database consisting client details and another client's project. If my menu is like below:

Menu.html

<table>
   <tr>
     <td>
        <a href="vpb_show_login_box()" class="vpb_general_button">Client Detail</a>
        <a href="vpb_show_login_box()" class="vpb_general_button">Client Project</a>
     </td>
   </tr>
</table>

Question: How can I use same login page but it adds on extra login requirements. i.e.

For Client Detail (Login)

Username and Passowrd requirement to login

For Client Project

Username, Passowrd and Department requirement to login

Answer 1

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();
        }
    });
    ...
}

Answer 2

Try changing the href to onclick.

<a onclick="vpb_show_login_box()" href="javascript:;" class="vpb_general_button">Login</a>

Or prefix javascript: before calling it in href