Показывать мод загрузки при наличии некоторых параметров - PullRequest
Новая
       65

Показывать мод загрузки при наличии некоторых параметров

0 голосов
/ 22 октября 2019

Я новичок в разработке веб-приложений, я создаю мини-проект с простой системой регистрации и подписи, я не хочу, чтобы пользователь заходил на другую страницу, чтобы войти, вместо этого я использовал bootstrap modal , который имеет форму входа, для которой у меня есть кнопка, которая при нажатии также изменяет URL-адрес и также запускает модальный режим. Теперь я хочу показать только модальное значение, если в url есть параметр = ?action=login.

Во-первых, я попытался document.getElementById('#myBtn').addEventListener('click', setQry) моей кнопке, которая вызывает функцию, которая при нажатии изменяет параметр url. Параметр url изменяется по клику очень хорошо, но модал не отображается, обратите внимание, что у меня есть атрибуты data-target и data-toggle на моей кнопке, чтобы модал показывался. Я также попробовал этот пример . Но это не работает.

Я просто хочу добиться, чтобы модал показывался, если у url есть параметр и при успешном входе в систему я хочу скрыть модал, а также удалить параметр url.

Вот мойHTML: 

<button type='button' id='toggle-modal' data-toggle='modal' data-target='#login-modal'></button>

Мой JavaScript: 

document.getElementById('#toggle-modal').addEventListener('click', setQry);
function setQry() {
    const url = new URL('http://localhost/learning%20php/practice%20programs/login%20system/');
    var qry_params = new URLSearchParams(url.search);
    if (!qry_params.has('action', 'login')) {
        qry_params.set('action', 'login');
        window.location.search = qry_params;
    }
    if (window.location.search == qry_params) {
        $('#login-modal').modal('show');
    }
};

Ответы [ 3 ]

1 голос
/ 22 октября 2019

Рассмотрите возможность использования PHP для этого. Вы можете получить GET Params в PHP, а затем изменить содержимое в зависимости от параметров get. 

<?php

if ($_GET['action'] == "login")
{

?> 

<!-- Add content in html if action code is set to "login" --> 

<?php

}

else
{ 
....

} 

?>
0 голосов
/ 22 октября 2019
  1. Событие вызывается дважды при нажатии кнопки. поэтому я должен удалить другие атрибуты из кнопки. <button type='button' id='toggle-modal' ></button>

  2. #, используемый в document.getElementById('#toggle-modal').addEventListener('click', setQry);, также создает проблему.

  3. установка параметров в javascript qry_params.set('action', 'login'); обновляет страницу,поэтому всплывающее окно закрывается.

поэтому код обновления приведен ниже, надеюсь, он решит проблему `` '`

<button type='button' id='toggle-modal' ></button>


<script>
document.getElementById('toggle-modal').addEventListener('click', setQry);
function setQry() {

const url = new URL('http://localhost/learning%20php/practice%20programs/login%20system/?action=login');
var qry_params = new URLSearchParams(url.search);
if (window.location.search.replace("?", "") == qry_params) {
        $('#login-modal').modal('show');
    }

}; </script>
0 голосов
/ 22 октября 2019

Этот код должен работать, ваш обработчик срабатывает только при нажатии, он не влияет на загрузку страницы, поэтому его следует вызывать для обработки параметров при загрузке страницы, извините за мой плохой английский 

setQry();

function setQry() {
    const url = new URL('http://localhost/learning%20php/practice%20programs/login%20system/');
    var qry_params = new URLSearchParams(url.search);
    if (!qry_params.has('action', 'login')) {
        qry_params.set('action', 'login');
        window.location.search = qry_params;
    }
    if (window.location.search == qry_params) {
        $('#login-modal').modal('show');
    }
};
...