网站点击链接，弹出遮罩层以后怎样设置该遮罩层的网址？

在网站首页点击链接，弹出一个遮罩层以后，网址栏显示的是首页的网址，怎样可以使它显示该遮罩层的网址？

这个问题和你提的这个不是一样的吗? http://.com/q/1010000004286689

只不过是多了一个显示遮罩的功能.

HTML5 新增的 pushState 就是用来实现,在不刷新页面的情况下,将页面中的效果改为另一个页面的效果.

如果需要的话,我可以给你整个DEMO出来.

DEMO地址: https://xqin.net/temp/pushState_demo/index.html (不保证长期有效)

主要代码如下:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>HTML5 pushState DEMO for SegmentFault</title>
 <style>
    a{
        display: inline-block;
        padding: 4px;
    }
    html,body{
        width: 400px;
        margin: 20px auto;
    }

    #content{
        position: absolute;
        z-index: 4;
        width: 600px;
        height: 200px;
        left: 50%;
        top: 20px;
        margin-left: -300px;
        border: 1px solid #D1D1D1;
        display: none;
        background: #ccc;
    }
 </style>
 </head>
 <body>
    <script>
        if(!history.pushState){
            alert('你的浏览器不支持HTML5的新特性!');
            location.replace('/');
        }
    </script>
    <script src="jquery.min.js"></script>
    <a href="1.html">1</a><a href="2.html">2</a><a href="3.html">3</a><a href="4.html">4</a><a href="5.html">5</a><a href="6.html">6</a><a href="7.html">7</a><a href="8.html">8</a><a href="9.html">9</a>
    <div id="content"></div>
    <script>

        $(document).on('click', 'a', function(){//绑定事件
            var url = $(this).attr('href');

            $.get(url, function(html){
                $('#content').html(html).fadeIn();

                history.pushState(url, 'new title', url);
            });

            return false;//阻止跳转
        }).on('click', '#content', function(){
            $(this).hide();

            history.pushState('index.html', 'index', 'index.html');
        });

        window.onpopstate = function(e){
            var url = e.state;//得到在 pushState 时压入的URL地址

            if(url === 'index.html'){//如果是首页, 则隐藏 content
                $('#content').hide();
            }else{//如果是其他的, 则请求数据 并 放在 content 中
                $.get(url, function(html){
                    $('#content').html(html).fadeIn();
                });
            }
        };
    </script>
 </body>
</html>

【热门文章】