将多个 css 属性添加到简单模式答案

【问题标题】：Adding multiple css properties to simple modal将多个 css 属性添加到简单模式
【发布时间】：2015-01-13 15:04:16
【问题描述】：

如何将overlayCss 中的多个 CSS 属性应用于简单模式（backgroundColor 属性除外）？我试过用逗号分隔属性，但这会破坏功能。

$('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal({
        appendTo: $(window.parent.document).find('body'),
        overlayCss: {backgroundColor:"#000"},
        overlayClose:true, 
    });
    // Set overlay's width
    $(window.parent.document).find('#basic-modal-content').css('width', "100%");

    return false;
});

【问题讨论】：

难道你不能只添加一个包含你想要的 CSS 属性的类，然后它就会应用于模态吗？

标签： jquery css simplemodal

【解决方案1】：

你最好使用一个实际的 css 类来定义多个样式

 $('#basic-modal-content').modal({
    appendTo: $(window.parent.document).find('body'),
    overlayCss: 'myClass',
    overlayClose:true, 
});

然后在css中

.myClass{
    [as many properties as you want here]
}

这将使您的代码更易于维护和扩展

【讨论】：

【解决方案2】：

你需要.css

$('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal({
        appendTo: $(window.parent.document).find('body').css({
            opacity: 1.0,
            backgroundColor: "black"
        }),
        //overlayCss: {backgroundColor:"#000"},
        overlayClose:true, 
    }).css({
     'opacity' : 0.8,
     'position': 'absolute',
     'top': 0,
     'left': 0,
     'background-color': 'black',
     'width': '100%'
  });
    // Set overlay's width
    $(window.parent.document).find('#basic-modal-content').css('width', "100%");

    return false;
})

【讨论】：