如何设置华丽的 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;
    }