javascript - 当 url 有一些参数时显示 Bootstrap 模式

Question

我是开发网络应用程序的新手，我正在创建一个迷你项目，它有一个简单的注册、签名系统，我不希望用户转到不同的页面登录，而是使用了 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

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

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