javascript - 几种基础展示模态需要不同的背景

Question

我在一页上有 2 个 Foundation 显示模态。它们独立地工作得很好，除了我需要一个的背景是黑色的，另一个是白色的。不幸的是，显示模态默认使用一种通用背景(.reveal-modal-bg)。如何为该背景实现不同的样式或为每个模式提供独特的背景？这是我在页面上的调用:

<script>
$(document).foundation('reveal', 
{
animation: 'fade',
animation_speed: 200,
close_on_background_click: true,
dismiss_modal_class: 'close-reveal-modal',
multiple_opened: false,
bg_class: 'reveal-modal-bg',
root_element: 'body',
on_ajax_error: $.noop,
bg : $('.reveal-modal-bg'),
css : {
open : {
  'opacity': 0,
  'visibility': 'visible',
  'display': 'block',
  'transition': 'visibility 0s linear 0.2s, opacity 0.2s linear'
},
close : {
  'opacity': 1,
  'visibility': 'hidden',
  'display': 'none',
  'transition-delay': '0s'
}
}
});
</script>

感谢您的见解。

Answer 1

您必须直接在 CSS 中处理这个问题。您可以通过向相关模态附加一个附加类并设置背景颜色来实现此目的。