Question

我正在尝试设置一个由uri内容填充的大胆弹出窗口。内容只是一些文字。我不想使用和HTML代码，因为弹出窗口是从按钮启动的。

我写的代码有效，但样式很糟糕。如何在以下JQuery代码中添加样式类：

$.magnificPopup.open({
    items: {
        src: 'www.someWebsitecontentPage.com',
        type: 'ajax',
        mainClass: 'my-mfp-zoom-in',
        myClassOne: 'modal-content',
        callbacks: {
            // wrap the ajax request with a div that we've styled to look good
            parseAjax: function (mfpResponse) {
                mfpResponse.data = "<div class='modal-content'>" + mfpResponse.data + "</div>";
            },
            ajaxContentAdded: function () {
                return this.content;
            }
        }
    },
    closeBtnInside: true
});

Answer 1

我发现构建以主包装类.mfp-content开头的CSS选择器最简单。从那里，你只需添加更多的特异性。这是一个例子：

.mfp-content #page-content
{
    margin-top: 1em;
}

    .mfp-content #page-content h3
    {
        margin-top: 1em;
    }

这对我有用，因为我确切知道我得到了什么标记，所以如果你的内容是可变的，你可能必须使用类似的东西：

.mfp-content h3
{
    margin-top: 1em;
}

    .mfp-content p
    {
        margin-top: 1em;
    }

你也可以建立你附加的div：

.mfp-content .modal-content
{
    margin: 1em;
}

    .mfp-content .modal-content h3
    {
        margin-bottom: 1em;
    }

如何设置夸张的ajax弹出式样式

1 个答案: