0

クリックするとメッセージが表示されるフォームとボタンがあります。問題は、最初のクリックでメッセージが 1 回だけ表示されるようになったことです。誰かが私が間違っていることを説明できますか?

Jクエリ:

function post_comment(id) {
    x = "#c" + id;
    $(x).click(function () {
        $('.login_modal_message').fadeIn(500);
        $('body').append('<div id="overlay"></div>');
        $('#overlay').fadeIn(300);
        return false;

        $('#overlay, .close').live('click', function () {
            $('#overlay , .login_modal_message').fadeOut(300, function () {
                $('#overlay').remove();
            });
            return false;
        });
    });
};

HTML:

 <form id="c408" method="post">
     <textarea class="comment_input" name="comment" placeholder="Write your comment here..."> 
     <input id="post_id" hidden="hidden" value="408" name="post_id">
     <button class="comment_button" onclick="post_comment(408)">Send</button>
 </form>
4

2 に答える 2

0

イベント ハンドラーをフォーム自体にバインドし、送信をキャッチする必要があります。そのようです：

完全なjQueryでUPDATE

function post_comment(id) {
  x = "#c" + id;

  $(x).submit(function() {
    $('#overlay').fadeIn(300);

    return false;
  });
}

$('#close-modal').on('click', function(event) {
  event.preventDefault();

  $('#overlay').fadeOut();
});

HTML

<form id="c408" method="post">
  <textarea class="comment_input" name="comment" placeholder="Write your comment here..."></textarea>
  <input id="post_id" hidden="hidden" value="408" name="post_id" />
  <button class="comment_button" onclick="post_comment(408)">Send</button>
</form>

<div class='overlay' id='overlay'>
<div class='login_modal_message' id='login_modal_message'>
  <p>Message</p>
  <a href='#' id="close-modal">Close modal</a>
</div>

CSS

#overlay {
  background: rgba(0, 0, 0, 0.85);
  bottom: 0;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.login_modal_message {
  background: white;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 200px;
}

更新: Codepen スケッチを追加しました。

于 2013-08-20T18:59:55.570 に答える