在CSS Bootstrap jquery模式中公开模态背景之外的元素

我正在使用CSS Bootstrap的Modalfunction，它运行得很好。 但是，我想添加一个function，当模式对话框打开而网页的其余部分被.modal-backdrop覆盖时，来自页面结构范围内不同位置的外部元素之一可以是暴露在背景之上：

 I want this element exposed even while the modal is active, upon clicking the button in the modal dialog box 
 
 
 
 
 Click this button to show the outside element: Click it! 
 
 
 
  (function($) { $('#test-item').click(function() { $('#outside-element').attr('style','zIndex:1041'); }); })(jQuery);  

正如您在上面的当前尝试中所看到的，我将外部元素的z-index设置为1041，这比.modal-backdrop设置（1040）高一个。 这并没有实现我想要的东西（即，将#outout-element放在模态背景的顶部），即使代码是声音和“工作”（也就是说，它最终修改了z-index）。

Answer 1

如果你有一个小提琴以一种我们可以运行它的方式显示你的代码并看看发生了什么，那将是很棒的。

您需要包含元素的位置，以使z-index生效：

 #outside-element { position: relative; z-index: 1041; } 

Answer 2

.modal-backdrop的z-index为1040，但.modal本身（#help-box）的z-index为1050，所以如果你的外部元素需要在背景前面和前面的对话框，你必须给它一个1051而不是1041的z-index。

如果它只需要在背景前面，但不会与对话框重叠，则应该使用1041的z-index，但是，正如@uapuap所提到的，你还需要给它一个位置，比如position: relative 。

这是一个显示它工作的小提琴，外部元素仅在背景前面，z-index为1041， position: relative ：

http://jsfiddle.net/fgyja20w/