Jquery: открыть HTML-окно во всплывающем JQuery

0

Я). Я пытался открыть новую страницу html во всплывающем окне. Всплывающее окно для входа в базу данных. Я попытался использовать образец Popup Sample, но это не слово. Ниже мой код, который я пытался:

menu.html

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

Изменения в 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);
}

Могу я узнать, какую ошибку я делаю?

II). Также у меня есть другой вопрос. У меня две разные базы данных. Одна база данных, состоящая из деталей клиента и другого клиентского проекта. Если мое меню выглядит следующим образом:

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>

Вопрос: Как я могу использовать одну страницу входа, но она добавляет дополнительные требования для входа в систему. т.е.

Подробные сведения о клиенте (Логин)

Имя пользователя и пароль для входа в систему

Для проекта клиента

Имя пользователя, Passowrd и требование Департамента для входа в систему

Теги:
login
popupwindow

2 ответа

0
Лучший ответ

Если у вас есть jQuery в любом случае, почему бы не использовать его в полной мере?

Вы можете добавить событие click в jQuery следующим образом:

$('.vpb_general_button').click(function(event) {
    event.preventDefault();
    vpb_show_login_box($(this).data('popup-type'));
});

В вашем HTML добавьте data-attribute чтобы указать тип всплывающего окна и удалить атрибут onclick и заменить значение href на #:

...
<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>
...

В вашей функции vpb_show_login_box обрабатываются разные типы всплывающих vpb_show_login_box. Например:

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

Обновление после комментария

Если вам нужно использовать login.html для разных всплывающих окон, вы можете добавить параметр в URL. Но вам нужно обработать popupType paramater в вашем login.html (вот пример).

function vpb_show_login_box(popupType) // add popupType here
{ 
    ...
    $("#vpb_login_pop_up_box").load("login.html?popupType=" + popupType);
    ...
}

Обновление 2

С функцией обратного вызова:

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();
        }
    });
    ...
}
  • 0
    Нет, вы не поняли, я хочу это одна страница login.html с двумя различными типами входа. Это требование, которое я создал. Но я также постараюсь проверить, если вы даете код работает или нет.
  • 0
    Могу ли я сделать это следующим образом if (popupType === 'project') {$ ("# vpb_pop_up_background"). Css ({"opacity": "0.4"}); $ ( "# Vpb_pop_up_background") FadeIn ( "медленные"). $ ( "# Vpb_login_pop_up_box") FadeIn ( 'быстрый'). load.department = visible.true; // Текстовое поле, видимое для true (код неправильный) $ ("# vpb_login_pop_up_box"). Load ("login.html"); }
Показать ещё 2 комментария
1

Попробуйте изменить href на onclick.

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

Или префикс javascript: перед вызовом его в href

  • 0
    Нет, это не работает.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню