jquery - fancybox 不显示 div 颜色？

Question

我正在<div>fancybox中加载。<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

You're using content: $("#divForm").html(). This gets the html from inside #divForm and not the actual #divForm. So with this you're loosing all your styles because there's no .error class to match against.

You should set the actual #divForm element as the content, and not what is inside the #divForm.

From jQuery docs:

.html()

Get the HTML contents of the first element in the set of matched elements

If in your HTML you have a direct parent over #divForm, select that parent and use .html() on it. Example:

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

Then do:

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

Answer 2

尝试这个：

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

Answer 3

只需更换

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

经过

href: "#divForm",

见JSFIDDLE

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