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>

点赞按钮将跳至新页面，如何将其更改为模式模式

1 个答案: