Question

如何将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;
});

Answer 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]
}

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

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

将多个css属性添加到简单模态

2 个答案: