jQuery 对话框中的 iframe 没有任何样式

Question

我有一个显示 jQuery 对话框的 Django 管理应用程序，该对话框在我显示的对话框内的 iframe 中显示了一个页面：

function opendialog(page, dialog_title) {

            var $dialog = $('#applied-assay')
            .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
            .dialog({
                title: dialog_title,
                autoOpen: false,
                dialogClass: 'dialog_fixed,ui-widget-header',
                modal: true,
                draggable:true

            });

            $dialog.dialog('open');
} 

function open_modal(url, title)
{
        opendialog(url, title);     

        return false;
}

到目前为止，还不错。但是 iframe 的内容没有任何样式：

在 iframe 中呈现的 html 模板看起来像：

{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrahead %}
{{ block.super }}
{{ media.js }}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/start/jquery-ui.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% endblock %}


<div class="modal-dialog">
        <div class="modal-content">                
                <form role="form" action="{% url 'myapp:applied_assay' 1 %}" method="post">               
                    <div class="modal-header">                      
                        <h3>Select applied assay type 1</h3>
                    </div>
                    <div class="modal-content">
                                    {% csrf_token %}
                            <div class="panel panel-default">
                                    <div class="panel-body">
                                            {{ form.as_p }}
                                    </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                            <div class="col-lg-12 text-right">
                                    <input type="submit" class="btn btn-primary" name="submit" value="Accept">
                                    <button type="button" class="btn btn-default" onclick="return close_modal()">
                                            Cancel
                                    </button>
                            </div>
                    </div>
                </form>
        </div>
</div>

有什么想法吗？

Answer 1

您还需要在 iframe 的 header 中包含样式表，并在 html 标记中包含相应的类。您只包含了一个 jquery-ui css 文件，但没有在 iframe 元素中使用它的任何类。

jQuery 对话框中的 iframe 没有任何样式

Iframe in jQuery dialog doesn't have any style

django

django-admin

jquery-ui-dialog