javascript - django 模板仅在 jquery 对话框中显示内容

Question

我有一个 Django HTML 模板如下:

{% extends 'base.html' %}
{% block title %}Cloud | Review {% endblock %}

{% block content %}
    {% load static %}
    {% load render_table from django_tables2 %}

    <div id="dialog" title="Dialog">
        <p>Testing a simple Dialog box.</p>
    </div>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        function EditDialog() {
            $( "#dialog" ).dialog();
            return false;
        }
    </script>

     <div class="function-page">
         <div class="table-form">
                <div class="function-container">
                    {% render_table reviews %}
                </div>
         </div>
     </div>

{% endblock %}

jquery 对话框在用户单击链接时启动。问题是当页面加载时，div 内容显示在页面顶部

<div id="dialog" title="Dialog">
    <p>Testing a simple Dialog box.</p>
</div>

是否可以仅在 jquery 对话框中显示此内容，而不是在通常的页面内容中显示。

此外，一旦我通过调用 EditDialog() 显示对话框，div 就会从主要的底层页面中消失。

Answer 1

好吧，简单地说:

<div id="dialog" title="Dialog" style="display: none;">
    <p>Testing a simple Dialog box.</p>
</div>

成功了