当url具有某些参数时显示引导程序模式

Question

[我是开发Web应用程序的新手，我正在创建一个具有简单注册，签名系统的迷你项目，我不希望用户转到其他页面进行登录，而是使用了bootstrap modal其中有一个登录表单，我有一个按钮，单击该按钮也可以更改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

此代码应该起作用，您的处理程序仅在单击时触发，它对页面加载没有影响，因此，应调用它来处理页面加载时的参数，对不起我的英语不好

document.getElementById('#toggle-modal').addEventListener('click', setQry);
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');
    }
};