Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I'm trying to open a modal and then have it focus on the textarea it isn't working. Was wondering is anyone could help me. I'm sure it has something to do with the execution but I'm just not sure exactly what it is. Here is some code:

$('.reportButton').click(function(){
    var $this = $(this);
    setTimeout(function(){
        $($this).siblings('.reportModal').fadeIn();
        $($this).siblings('.reportModal textarea').focus();
    }, 100);
});

$(window).on('click', function(e) {
    if ($('.reportModal').is(':visible') && $(e.target).closest('.reportModalContent').length === 0) {
        $('.reportModal').fadeOut(); // Whichever the opened one is... Close them all!
    }
});

$('.closeReportModal').click(function(){
    //$('#myModal').css({'display':'none'});
    $(this).closest('.reportModal').fadeOut();
});

Here is the report modal code:

<li>
    <button class="reportButton">Report</button>
    <div class="reportModal">
        <!-- Modal content -->
        <div class="reportModalContent">
        <form action="/report/" method="POST">
            @csrf
            <input type="hidden" name="id" value="">
            <input type="hidden" name="type" value="">
          <div class="layer">
            <div class="report-header"><h2>
                Report content
            </h2></div>
            <div class="closeReportModal" class="">&times;</div>
          </div>
          <hr>
          <div class="layer-2">
              <dl>
                  <dt>
                    Report reason:
                  </dt>
                  <dd>

                    <textarea name="body" value=""></textarea>

                  </dd>
              </dl>
          </div>
          <hr>
          <div class="layer-3">
              <dl>
                  <dt>

                  </dt>
                  <dd>
                      <button type="submit" class="report">Report</button>
                  </dd>
              </dl>
          </div>
        </form>
        </div>
    </div>
</li>

Thank you I appreciate your help.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
2.6k views
Welcome To Ask or Share your Answers For Others

1 Answer

等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...