Question

所以我有一个页面，上面有一个链接，打开我建立的自定义模态窗口。我创建了一个onclick方法来处理网址更改，以便用户可以保存网址并直接打开模态页面。然后想法是当你关闭模态时，它会返回到它之前的网址。

HTML

<div onclick="ChangeUrl('Case study 5', 'BASEURL/case_studies=case-study-5');" ></div>

JS

function ChangeUrl(title, url) {
    var address = window.location.href;
    alert(address);
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Your Browser does not support HTML5. Please update your browser 
    to get the full experience of our website.");
    }

这很好用，但问题是我使用相同的onclick方法在模态关闭时更改网址。如果我只是从一个主页面执行此操作会很好，但是从多个页面访问模态窗口php文件以用作模式，因此我需要一些动态方式将URL更改回上一页＆＃39 ;网址。有没有办法获取url并将其放入我的模态php中的onclick方法，以便它将返回上一页？

修改

在robmarston的建议中，我更改了我的模态html，以包含一个名为modalstate的数据属性，该属性设置为open。

然后我更新了JS以考虑属性的状态，如此。

JS

function ChangeUrl(title, url) {
if (typeof (history.pushState) != "undefined") {
    console.log($('.js-post-close').data('modalstate'));
        if($('.js-post-close').data('modalState') == "open"){
            var obj = { Title: "blueleaf", Url: address};
            history.pushState(obj, obj.Title, obj.Url);
        }
        else {
            address = window.location.href;
            var obj = { Title: title, Url: url };
            history.pushState(obj, obj.Title, obj.Url);
        }
} else {
    alert("Your Browser does not support HTML5. Please update your browser to get the full experience of our website.");
}
    console.log(address);
}

这不起作用，甚至认为控制台会记录＆＃34;打开＆＃34;每当我点击关闭窗口。我也尝试使用$（＆＃39; .js-post-close＆＃39;）。data（＆＃39; modalState＆＃39;）！= undefined），但结果相同。该页面将不会输入相应的逻辑来将URL更改回地址。

Answer 1

您始终可以向div添加属性以指定模态所处的状态，例如：

<div data-modalstate="open" onclick="ChangeUrl('Case study 5','BASEURL/case_studies=case-study-5');"></div>

然后你的函数可以简单地为modalstate提供资源并采取适当的行动。

Onclick将url更改为上一个url

1 个答案: