Question

js点击按钮显示再点击空白地方隐藏

如题 要怎么做啊 我JS完全不会啊
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
点击空白就隐藏怎么改

Answer 1

达到你所说的效果很简单

<input type="button" onclick="Show();" value="显示" />
    <div id="ceng" style="position:absolute; width: 100%; height: 100%; top: 0; left: 0; display: none;">
        <div onclick="Hide();" style="position:absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4);"></div>
        <div style="position:relative;margin:auto; width: 100px;height:100px;background-color:white;">
        </div>
    </div>

<script type="text/javascript">
        function Show() {
            document.getElementById("ceng").style.display = "block";
        }
        function Hide() {
           document.getElementById("ceng").style.display = "none";
        }
    </script>

设置一个隐藏层，点击按钮的时候改变隐藏层的display属性，将隐藏层显示出来。

再给隐藏层设置一个Hide()点击方法，点击隐藏层再次隐藏。

望采纳！

追问

大神 可加企鹅详聊吗

追答

代码效果不行吗？
二九四二七六九一九
哥们，帮忙采纳一下！谢谢！

Answer 2

达到你所说的效果很简单

1
2
3
4
5
6

<input type="button" onclick="Show();" value="显示" />
<div id="ceng" style="position:absolute; width: <a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="baidu-highlight">100%</a>; height: <a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="baidu-highlight">100%</a>; top: 0; left: 0; display: none;">
<div onclick="<a href="https://www.baidu.com/s?wd=Hide&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="baidu-highlight">Hide</a>();" style="position:absolute; width: <a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="baidu-highlight">100%</a>; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4);"></div>
<div style="position:relative;margin:auto; width: 100px;height:100px;background-color:white;">
</div>
</div>

1
2
3
4
5
6
7
8

<script type="text/javascript">
function Show() {
document.getElementById("ceng").style.display = "block";
}
function <a href="https://www.baidu.com/s?wd=Hide&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="baidu-highlight">Hide</a>() {
document.getElementById("ceng").style.display = "none";
}
</script>

设置一个隐藏层，点击按钮的时候改变隐藏层的display属性，将隐藏层显示出来。
再给隐藏层设置一个Hide()点击方法，点击隐藏层再次隐藏。
望采纳！
追问：
大神 可加企鹅详聊吗

Answer 3

可以参考这个！

document.onclick = function(){

    //隐藏层代码

};

 

div.onclick = function(oEvent){

    //取消冒泡

    oEvent = oEvent || window.event;

    if(document.all){

        oEvent.cancelBubble = true;

    }else{

        oEvent.stopPropagation();

    }

};