当 url 有一些参数时显示引导模式

Question

我是开发网络应用程序的新手，我正在创建一个具有简单注册、签名系统的迷你项目，我不希望用户转到其他页面登录，而是使用了 @987654321 @ 有一个登录表单，我有一个按钮，单击该按钮也会更改 url 并触发模式。现在我只想显示模式，如果 url 有参数 = ?action=login。

首先，我尝试了document.getElementById('#myBtn').addEventListener('click', setQry) 到我的按钮，该按钮调用在单击时更改url 参数的函数。点击时 url 参数变化非常好，但模式没有显示，请注意我的按钮上有 data-target 和 data-toggle 属性以显示模式。我也试过this example。但它不起作用。

我只是想实现那个模式应该出现，如果 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');
    }
};

Answer 1

考虑为此使用 PHP。您可以在 PHP 中获取 GET 参数，然后根据获取参数更改内容。

<?php

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

?> 

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

<?php

}

else
{ 
....

} 

?>

Answer 2

这段代码应该可以工作，你的处理程序只在点击时触发，它对页面加载没有影响，因此，应该调用它来处理页面加载时的参数，对不起我的英语不好

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');
    }
};

Answer 3

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>