0

如果有人访问网站页面并且他们想从正文的网站页面移动，那么会弹出带有关闭按钮的表单。我就像弹出窗口一样工作，但关闭按钮不起作用。

如果可能的话，当我按下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/

4

2 回答 2

0
  1. 所有事件分配都必须在 $(function() {}) 内
  2. 你在 mouseleave 上的点击在语法上是错误的
  3. 按钮分配中的 } 太多
  4. 如果你有 $(function() {} 你可能不会在小提琴中使用 onload ，而是使用 head
  5. 我改为 $(document) 而不是 $('html')
  6. 添加了测试esc- 请注意，只有在文档有焦点时才会注册，所以在 jsFiddle 中，只有当你回到框架中时它才会起作用

这有效

现场演示

$(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();
      }  
    });    
});
于 2013-11-13T10:30:16.763 回答
-1

尝试关注...我}在 js 中删除了一个额外的括号（从你的小提琴中）。

更新了 JS Fiddle

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

$('.btn').on('click', function () {
    $(".popupBox").hide();
});
于 2013-11-13T10:29:37.277 回答