Question

我有一些代码会在满足计时器后弹出一个弹出窗口。目前，代码的设计使得当您单击它关闭的元素时，我只想反转它，以便在您关闭元素（屏幕上的任何其他位置）时关闭它。

提前感谢您的帮助。

    <script type="text/javascript">
$(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown'){
        $("#popup").delay(5000).fadeIn();
        localStorage.setItem('popState','shown')
    }

    $('#popup-close').click(function(e) // You are clicking the close button
    {
    $('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $('#popup').click(function(e) 
    {
    $('#popup').fadeOut(); 
    });
});

HTML / CSS是：

<div style="display:none; width:50%; height:50%; background-color:blue; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:1000;" id="popup"><p>Testing Newsletter Box</p><p>Click to close</p></div>

这不是菜单或点击，点击关闭事件。它是一个自动出现的弹出窗口，一旦关闭就不能再带回来，所以与以前的问题不一样。

Answer 1

聚焦和非聚焦元素

$(document).ready(function() {
if(localStorage.getItem('popState') != 'shown'){
    $("#popup").delay(5000).fadeIn();
    $("#popup").focus(); //Focus when visible
    localStorage.setItem('popState','shown')
}
$('#popup-close').focusout(function(){
    $('#popup').fadeOut();   //When focus lost, fadeout
});
$('#popup-close').click(function(e) // You are clicking the close button
{
$('#popup').fadeOut(); // Now the pop up is hiden.
});
$('#popup').click(function(e) 
{
$('#popup').fadeOut(); 
});
});

Javascript隐藏点击关闭元素

1 个答案: