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. マウスリーブで構文的に間違ったクリックがありました
  3. ボタンの割り当てに } が多すぎます
  4. $(function() {} がある場合は、フィドルで onload を使用できません。代わりに head を使用してください
  5. $('html') の代わりに $(document) に変更しました
  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の余分なブラケットを1つ削除しました（フィドルから）。

更新された JS フィドル

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

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