Question

我在下面的网站上寻找效果。如果单击页面上的任意位置，将显示全屏div / background。链接链接等。仍然必须是可点击的。

我的网站是：http://www.ee12.dk/（密码engbirk2012），如果您第一次点击它，我就不会一次又一次地显示该图层。

<div class='clickOnMe' onmouseup='mouseUp(this);' onmousedown='mouseDown(this);'>
</div>

<style>
    .clickOnMe { 
        margin-top: -50px; 
        min-height: 100%; 
        min-width: 100%; 
        position: fixed; 
        z-index: 9999999999999999999999999;
    }
</style>

 <script type='text/javascript'>
    function mouseUp(element){
          element.style.background = 'none';
          element.style.pointerEvents = 'none';
    }

    function mouseDown(element){
        element.style.backgroundImage="url('http://www.ee12.dk/wp-content/uploads/2014/08/blackani.gif')";
    }
</script>

Answer 1

我将点击事件绑定到页面主体，并使用jquery使用$（'body'）将点击事件绑定到页面上的每个A标签.on（“click”，“a”，function（）{}）然后在绑定到A标签的点击中，设置一个变量（DoIt = false）。然后在页面的单击事件中，检查变量，然后根据该变量显示div。然后一定要在身体的点击事件结束时再次将其设置为true。

$('body').click(function(){ if (DoIt == true) {/* do something */} DoIt=true;});

$('body').on('click', 'a', function(){ DoIt == false ;});

我想你明白了。在这里从ipad上的内存编码。： - ）

Answer 2

这是JSFIDDLE

以下是工作代码。当您按下鼠标按钮时，此代码使用div标记显示为全屏，并在您释放它时将其隐藏。您可以根据您的要求进行调整。

$(document).mousedown(function () {
    $('.fullscreen').show();
}).mouseup(function () {
    $('.fullscreen').hide();
});

点击页面上的任意位置显示全屏div

2 个答案: