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

Posted 2023-02-22

如题 要怎么做啊 我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' );


点击空白就隐藏怎么改

达到你所说的效果很简单

<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()点击方法，点击隐藏层再次隐藏。

望采纳！

追问

大神 可加企鹅详聊吗

追答

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

参考技术A 达到你所说的效果很简单

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()点击方法，点击隐藏层再次隐藏。
望采纳！
追问：
大神 可加企鹅详聊吗 参考技术B

可以参考这个！

document.onclick = function()

    //隐藏层代码

;

 

div.onclick = function(oEvent)

    //取消冒泡

    oEvent = oEvent || window.event;

    if(document.all)

        oEvent.cancelBubble = true;

    else

        oEvent.stopPropagation();

    

;