Кнопка «Мне нравится» позволит перейти на новую страницу, как перевести ее в модальный режим

Question

Я изучаю django-comments-xtd, когда я нажимаю кнопку «Мне нравится», она переходит на новую страницу.

Как мне сделать эту новую страницу всплывающей на текущей странице модальным способом?

Спасибо.

/home/web/venv/lib/python3.7/site-packages/django_comments_xtd/templates/includes/django_comments_xtd содержание:

{% if allow_feedback %}
<span class="small">
    {% if show_feedback and item.likedit_users %}
    <a class="badge badge-primary text-white cfb-counter" data-tooltip="{{ item.likedit_users|join:' , ' }}">
        {{ item.likedit_users|length }}</a>
    {% endif %}

    <a href="{% url 'comments-xtd-like' item.comment.pk %}"
       class="{% if not item.likedit %}like{% endif %}">
        <i class="thumbs up outline icon"></i></a>
    <span class="text-muted"></span>

    {% if show_feedback and item.dislikedit_users %}
    <a class="badge badge-primary text-white cfb-counter" data-tooltip="{{ item.dislikedit_users|join:' , ' }}">
        {{ item.dislikedit_users|length }}</a>
    {% endif %}

    <a href="{% url 'comments-xtd-dislike' item.comment.pk %}"
       class="{% if not item.dislikedit %}dislike{% endif %}">
        <i class="thumbs down outline icon"></i></a>
</span>
{% endif %}

Кнопка «Мне нравится» указывает на ссылку:

<a href="{% url 'comments-xtd-like' item.comment.pk %}"
       class="{% if not item.likedit %}like{% endif %}">
        <i class="thumbs up outline icon"></i></a>

Answer 1

Вы можете использовать простой Bootstrap Modal для того же самого.

Пример:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>










<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>