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

score 1 · Answer 1 · answered Apr 18 '14 at 15:08

1

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

answered Apr 18 '14 at 15:08

Amit Joki

58,320
7
77
95

score 0 · Accepted Answer · edited May 23 '17 at 12:11

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

No you didn't understood I want is one login.html page with two different login types. That is the requirement which I have create. But i'll also try to check if you give code is working or not. — user120838, Apr 18 '14 at 15:32
Can I do it this way if (popupType === 'project') { $("#vpb_pop_up_background").css({ "opacity": "0.4" }); $("#vpb_pop_up_background").fadeIn("slow"); $("#vpb_login_pop_up_box").fadeIn('fast'); load.department = visible.true; //Textbox visible to true (code is wrong) $("#vpb_login_pop_up_box").load("login.html"); } — user120838, Apr 18 '14 at 15:43
No you can't, you don't have control over the `login.html` yet. You can however add a `callback` to your `load()` function and handle it then. See [jQuery load documentation](https://api.jquery.com/load/). — Ex-iT, Apr 18 '14 at 16:41

Jquery: Open a html window in popup jquery

2 Answers2