fancybox没有显示div颜色？

Question

我正在fancybox中加载<div>。<div>的背景色为Red。但是css没有加载它。可能有什么不对？

<div id="divForm" style="display: none;" class="error">
    An error has occurred on the page.
</div>

function display_dialog() {
        $.fancybox.open({
            modal:true,
            content: $("#divForm").html(),
            padding: 5,
            openEffect: 'fade',
            openSpeed: 'normal',
            closeEffect: 'elastic',
            closeSpeed: 'slow'

        });
}

 .error {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #D8000C;
    background-color: #FFBABA;
}

Answer 1

您正在使用content: $("#divForm").html()。这从#divForm内部获取html而不是实际的#divForm。因此，您将失去所有样式，因为没有.error类可以匹配。

您应该将实际的#divForm元素设置为内容，而不是#divForm内的内容。

来自jQuery docs：

  

的.html（）

     

获取匹配元素集中第一个元素的HTML内容

如果您的HTML中有直接父级#divForm，请选择该父级并在其上使用.html()。例如：

<div class="bananas">
    <div id="divForm" style="display: none;" class="error">
        An error has occurred on the page.
    </div>
</div>

然后做：

content: $(".bananas").html();

Answer 2

只需替换

content: $("#divForm").html(),

通过

href: "#divForm",

参见 JSFIDDLE

另外，请记住，如果您使用的是modal: true，则可能需要设置一种手动或自动关闭方框的方法。

Answer 3

试试这个：

<div id="divForm" style="display: none;">
    <div class="error">
        An error has occurred on the page.
    </div>
</div>