Question

我正在尝试使用模态做一些不同的事情，并始终在叠加层上显示我们的徽标。

情况是，当用户打开模态时，会出现模态，但我们的徽标会覆盖在黑色透明部分上方。

我已经通过多种方式尝试了这一点，并且可以看到徽标的z-index不断重置，即使我将z-index及其位置硬编码到模态z-index之上。

我甚至尝试使用辅助徽标图像来显示对话框的显示时间，使其显示在叠加层上方。但没有运气。

这里有什么东西我不在了吗？

提前致谢

$("[data-toggle=modal").click(function(){
// events to occur globally for when a modal is toggled
    $("#ajax-right-modal-large").on('shown.bs.modal',function(){
      $("#logo").addClass('hidden');
       $("#logo-modal").removeClass('hidden').attr('style','border:1px solid blue; z-index: 1701 !important;');      
      $(".fade-in").css('z-index','1501');
      $("#logo-modal").attr('style','');
    });
    // end function
});

Answer 1

我认为你的导航栏有一个位置，所以当父母有位置时你试图定位你的徽标，这就是为什么你没有得到任何结果。很难说，因为我无法看到你的HTML标记看起来像什么，但我认为这是问题。所以你可以在这里做几件不同的事情。如果您使用的是静态导航栏，则可以执行以下操作：

body.modal-open .navbar-static-top{
  position:inherit;
}

然后，您可以将徽标定位到高z-index，并在模态叠加层上方给出一个固定位置。

如果您使用固定的导航栏，那么您可能不想这样做，因为它会让您的内容跳转并且您的导航栏将在模态叠加层下方消失，因此您可能只想在页面顶部添加徽标并给它一个display:none，然后在body.modal-open上给它一个块的显示，这样它才会在你的模态打开时出现。

或者您可以添加并删除徽标evey时间，使用jquery打开模式，如下所示：

$(document).on('shown.bs.modal',function(){
  $('body').append('<a class="appended-logo">Appended Logo</a>')
});
$(document).on('hidden.bs.modal',function(){
  $('.appended-logo').remove();
});

这是一个小提琴，只是在页面顶部放置一个标识，显示无，并附带jquery附加标识，以便您可以看到这两个。

Fiddle Demo

无论如何，我希望这是你正在寻找的，并希望它有所帮助。

如何通过模态背景制作徽标

1 个答案: