Question

如果有人访问网站页面并且他们想要从正文的网站页面移动，那么使用关闭按钮弹出窗体。我做的就像弹出窗口正在工作但关闭按钮不起作用。

如果可能的话，当我按 esc 时，弹出窗口应该关闭（隐藏）。

<div class="popupBox"><button class="btn">x</button></div>

<style type="text/css">
    .popupBox{
        width: 400px;
        height: 200px;
        margin: 50px auto;
        box-shadow: 0 0 5px rgba(0,0,0, 0.3);
        position: relative;
            display: none;
    }
.popupBox .btn{
        position: absolute;
        width: 24px;
        height: 24px;
        text-align: center;;
        border-radius: 100%;
        color: #000;
        top: -15px;
        right: -15px;
        cursor: pointer;
        background: #f9f9f9;
    }

演示 http://jsfiddle.net/mdsa/y3Ysm/

Answer 1

所有事件分配都必须在$（function（）{}）
你在mouseleave上有一个语法错误的点击
按钮分配中有太多}
如果你有$（function（）{}你可能不会在小提琴中使用onload，而是使用head
我改为$（文件）而不是$（'html'）
为 esc 添加了测试 - 请注意，只有在文档具有焦点时才会注册，因此在jsFiddle中它只有在你回到框架中时才会起作用

这有效

Live Demo

$(function () {
    $(document).mouseleave(function () {
        $('.popupBox').show();
    });
    $('.btn').on('click', function () {
        $(".popupBox").hide();
    });
    $(document).keyup(function(e) {
      if (e.keyCode == 27) {  // esc
         var $popup = $(".popupBox");
         if ($popup.is(":visible")) $popup.hide();
      }  
    });    
});

Answer 2

请尝试以下操作...我在js中删除了一个额外的括号}（来自您的小提琴）。

Updated JS Fiddle

$(function () {
    $('html').mouseleave('click', function () {
        $('.popupBox').show();
    });
});

$('.btn').on('click', function () {
    $(".popupBox").hide();
});

带有弹出窗体的mouseleave事件

2 个答案: