如何在页面加载时将附加标记加载到URL中

时间:2013-11-21 04:12:10

标签: html css modalpopups

我知道有更有效的方法可以做到这一点,但我有理由这样做。我有一个模态弹出窗口。我想在访问者加载页面后立即弹出此窗口。到目前为止,通过单击将它们带到index.php#login_form的链接来到达并打开窗口。

“#login_form”是我想在页面加载时添加URL的内容。然后,一旦最初加载了弹出窗口,他们就可以选择退出它。

现在有没有办法更有效地完成这项工作而不必更改我的css或代码?

谢谢!

3 个答案:

答案 0 :(得分:2)

可以通过javascript中的window.location.hash访问网址中的哈希值。您可以在body onload事件中判断这一点。

答案 1 :(得分:1)

为了回答你的问题,我创造了一个小提琴,以你的榜样和解决你想要的东西。 http://jsfiddle.net/sgaurav/xA4vG/

基本上这段代码的作用是,选择你想要模拟的点击的id,然后根据这里给出的答案创建一个鼠标点击事件How do I simulate user clicking a link in JQuery?

$.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE
        }
    });
}

现在这段代码用于身体的onload事件,假装点击您手动执行的链接,直到现在使用

jQuery(document).load(
    jQuery('#join_pop').simulateClick()
);

这会在页面打开后立即加载弹出窗口。如果需要,您可以将最后一个代码中的ID更改为登录表单,并且会在页面加载时显示而不是注册。

答案 2 :(得分:0)

一种简单的方法是使用hash_form标记直接加载页面:

http://www.script-tutorials.com/demos/222/index.html#login_form

或者如果你想要更多"精确"你可以像这样使用jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>

<!--Place this at the end of the body tag.-->
<script>
$(function(){
   window.location.hash = "login_form"; //this will add with js the #login_form hash at the end of th url
})
</script>


您可以使用jquery在加载窗口时显示模式: 试试这段代码,您就会明白:

$(function(){
   alert("Done loading");   
})

您将添加代码以显示模态而不是警报功能。如果使用css显示或隐藏模态,则可以使用以下命令轻松地将css类添加到元素中

$(".element").addClass("showModal);

或者删除一个类:

 $(".element").removeClass("hideModal");

确保导入了jquery库。我希望这能回答你的问题。