javascript - 如何设计放大的ajax弹出窗口的样式

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;
    }