如何用JS屏蔽页面的某一部分？使那部分不能点击

用个全透明的gif或png图片盖在几个链接上面，

解决方案 »

  1.   

    css3有
    pointer-events:none;
    直接disabled不就好了
      

  2.   

    在css里加上pointer-events:none就可以了
    这个是没有加的
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><style>
    *{
    margin:0;
    padding:0;
    }
    .clear:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    nav{
    display:inline-block;
    border:1px solid #505255;
    border-bottom: 1px solid #282C2F;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin:50px;
    -webkit-box-shadow:1px 1px 3px #292929;
        -moz-box-shadow:1px 1px 3px #292929;
    }
    li{
    list-style:none;
    float:left;
    border-right: 1px solid #2E3235;
    position: relative;
    background:#555D5F;
    }
    li:hover{
    background:#3E4245;
    -moz-transition: background 1s ease-out;
    -webkit-transition: background 1s ease-out;
    }
    li a{
    display:block;
    height:40px;
    line-height:40px;
    padding:0 30px;
    font-size:12px;
    color:#fff;
    text-shadow: 0px -1px 0px #000;
    text-decoration:none;
    white-space:nowrap;
    border-left: 1px solid #999E9F;
        border-top: 1px solid #999E9F;
    -moz-border-top-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;

    z-index:100;
    }
    li > a{
    position:relative;
    }
    li.first a{
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    }
    li.last{
    border-right: 0 none;
    }
    dl{
    position:absolute;
    display:block;
    top:40px;
    left: -25px;

    width:165px;

    background:#222222;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    -webkit-box-shadow:1px 1px 3px #292929;
        -moz-box-shadow:1px 1px 3px #292929;

    z-index:10;
                
    }
    li:hover dl{
    top:50px;
    display:block;
    width:145px;
    padding:10px;
    }
    dl a{
    background:transparent;
    border:0 none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-transition: background 0.5s ease-out;
    -webkit-transition: background 0.5s ease-out;

    z-index:50;
    }
    dl a:hover{
    color:#FFF;
    background:#999E9F;
    -moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    }
    dd{
    margin-top:-40px;
    opacity:0;
    width:145px;
    -webkit-transition-property:all;
    -moz-transition-property: all;}
    li:hover dd{
    margin-top:0;
    opacity:1;
    }
    li dd:nth-child(1){
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    }
    li dd:nth-child(2){
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    }
    li dd:nth-child(3){
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    }
    li dd:nth-child(4){
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    }
    dt{
    display:none;
    margin-top:-25px;
    padding-top:15px;
    height:10px;
    }
    li:hover dt{
    display:block;
    }
    .Darrow{
    float:right;
    margin:18px 10px 0 0;
    border-width:5px;
    border-color:#FFF transparent transparent transparent;
    border-style:solid;
    width:0;
    height:0;
    line-height:0;
    overflow:hidden;

    cursor:pointer;

    text-shadow: 0px -1px 0px #000;

    -webkit-box-shadow:0px -1px 0px #000;
        -moz-box-shadow:0px -1px 0px #000;
    }
    .arrow{
    margin:0 auto;
    margin-top:-5px;
    display:block;
    width:10px;
    height:10px;
    background:#222222;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    }
    </style>
    </head>
    <body>
    <nav>
    <ul class="clear">
         <li class="first"><a href="#">菜单一</a></li>
            <li>
             <span class="Darrow"></span>
                <a href="#">菜单二</a>
             <dl>
                 <dt><span class="arrow"></span></dt>
                    <dd><a href="#">子菜单一</a></dd>
                    <dd><a href="#">子菜单二</a></dd>
                    <dd><a href="#">子菜单三子菜单三</a></dd>
                </dl>
            </li>
            <li>
             <span class="Darrow"></span>
                <a href="#">菜单三</a>
             <dl>
                 <dt><span class="arrow"></span></dt>
                    <dd><a href="#">子菜单一</a></dd>
                    <dd><a href="#">子菜单二</a></dd>
                    <dd><a href="#">子菜单三子菜单三</a></dd>
                </dl>
            </li>
            <li>
             <span class="Darrow"></span>
                <a href="#">菜单四</a>
             <dl>
                 <dt><span class="arrow"></span></dt>
                    <dd><a href="#">子菜单一</a></dd>
                    <dd><a href="#">子菜单二</a></dd>
                    <dd><a href="#">子菜单三</a></dd>
                    <dd><a href="#">子菜单四</a></dd>
                </dl>
            </li>
            <li><a href="#">菜单五</a></li>
            <li><a href="#">菜单六</a></li>
            <li><a href="#">菜单七</a></li>
            <li class="last"><a href="#">菜单八</a></li>
        </ul>
    </nav>
    </body>
    </html>
    这个是加pointer-events:none的
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><style>
    *{
    margin:0;
    padding:0;
    }
    .clear:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    nav{
    display:inline-block;
    border:1px solid #505255;
    border-bottom: 1px solid #282C2F;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin:50px;
    -webkit-box-shadow:1px 1px 3px #292929;
        -moz-box-shadow:1px 1px 3px #292929;
    pointer-events:none;
    }
    li{
    list-style:none;
    float:left;
    border-right: 1px solid #2E3235;
    position: relative;
    background:#555D5F;
    }
    li:hover{
    background:#3E4245;
    -moz-transition: background 1s ease-out;
    -webkit-transition: background 1s ease-out;
    }
    li a{
    display:block;
    height:40px;
    line-height:40px;
    padding:0 30px;
    font-size:12px;
    color:#fff;
    text-shadow: 0px -1px 0px #000;
    text-decoration:none;
    white-space:nowrap;
    border-left: 1px solid #999E9F;
        border-top: 1px solid #999E9F;
    -moz-border-top-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;

    z-index:100;
    }
    li > a{
    position:relative;
    }
    li.first a{
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    }
    li.last{
    border-right: 0 none;
    }
    dl{
    position:absolute;
    display:block;
    top:40px;
    left: -25px;

    width:165px;

    background:#222222;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    -webkit-box-shadow:1px 1px 3px #292929;
        -moz-box-shadow:1px 1px 3px #292929;

    z-index:10;
                
    }
    li:hover dl{
    top:50px;
    display:block;
    width:145px;
    padding:10px;
    }
    dl a{
    background:transparent;
    border:0 none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-transition: background 0.5s ease-out;
    -webkit-transition: background 0.5s ease-out;

    z-index:50;
    }
    dl a:hover{
    color:#FFF;
    background:#999E9F;
    -moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    }
    dd{
    margin-top:-40px;
    opacity:0;
    width:145px;
    -webkit-transition-property:all;
    -moz-transition-property: all;}
    li:hover dd{
    margin-top:0;
    opacity:1;
    }
    li dd:nth-child(1){
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    }
    li dd:nth-child(2){
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    }
    li dd:nth-child(3){
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    }
    li dd:nth-child(4){
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    }
    dt{
    display:none;
    margin-top:-25px;
    padding-top:15px;
    height:10px;
    }
    li:hover dt{
    display:block;
    }
    .Darrow{
    float:right;
    margin:18px 10px 0 0;
    border-width:5px;
    border-color:#FFF transparent transparent transparent;
    border-style:solid;
    width:0;
    height:0;
    line-height:0;
    overflow:hidden;

    cursor:pointer;

    text-shadow: 0px -1px 0px #000;

    -webkit-box-shadow:0px -1px 0px #000;
        -moz-box-shadow:0px -1px 0px #000;
    }
    .arrow{
    margin:0 auto;
    margin-top:-5px;
    display:block;
    width:10px;
    height:10px;
    background:#222222;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    }
    </style>
    </head>
    <body>
    <nav>
    <ul class="clear">
         <li class="first"><a href="#">菜单一</a></li>
            <li>
             <span class="Darrow"></span>
                <a href="#">菜单二</a>
             <dl>
                 <dt><span class="arrow"></span></dt>
                    <dd><a href="#">子菜单一</a></dd>
                    <dd><a href="#">子菜单二</a></dd>
                    <dd><a href="#">子菜单三子菜单三</a></dd>
                </dl>
            </li>
            <li>
             <span class="Darrow"></span>
                <a href="#">菜单三</a>
             <dl>
                 <dt><span class="arrow"></span></dt>
                    <dd><a href="#">子菜单一</a></dd>
                    <dd><a href="#">子菜单二</a></dd>
                    <dd><a href="#">子菜单三子菜单三</a></dd>
                </dl>
            </li>
            <li>
             <span class="Darrow"></span>
                <a href="#">菜单四</a>
             <dl>
                 <dt><span class="arrow"></span></dt>
                    <dd><a href="#">子菜单一</a></dd>
                    <dd><a href="#">子菜单二</a></dd>
                    <dd><a href="#">子菜单三</a></dd>
                    <dd><a href="#">子菜单四</a></dd>
                </dl>
            </li>
            <li><a href="#">菜单五</a></li>
            <li><a href="#">菜单六</a></li>
            <li><a href="#">菜单七</a></li>
            <li class="last"><a href="#">菜单八</a></li>
        </ul>
    </nav>
    </body>
    </html>pointer-events:none顾名思意，就是鼠标事件拜拜的意思。元素应用了该CSS属性，链接啊，点击啊什么的都变成了“浮云牌酱油”。pointer-events:none的作用不只是禁用链接hover，打开链接等效果，是真实意义上的将onlick事件去掉了。
      

  3.   

    弄个透明的层盖住<div style="position:relative">
    <div style="position:absolute;width:100%;height:100%;left:0px;top:0px;background:#000;filter:alpha(opacity=0);opacity:0"></div>
    <iframe src="http://www.baidu.com"></iframe>
    你就是无法选择我和点击
    </div>