在CSS Bootstrap jquery modal中显示模态背景之外的元素 [英] Exposing element outside modal-backdrop in CSS Bootstrap jquery modal
问题描述
我使用CSS Bootstrap的Modal功能,它的工作完美。但是,我想添加一个功能,当模态对话框打开并且网页的其余部分被.modal-backdrop覆盖时,页面结构范围内不同位置的外部元素之一可以是暴露在背景顶部:
I'm using CSS Bootstrap's Modal feature, and it's working perfectly. However, I want to add a functionality that while the modal dialog is open and the rest of the web page is covered up by the .modal-backdrop, one of the outside elements from a different place within the scope of the page's structure can be exposed on top of the backdrop:
<div id="outside-element">
I want this element exposed even while the modal is active,
upon clicking the button in the modal dialog box
</div>
<div id="help-box" class="modal fade" data-backdrop="static" data-keyboard="false" data-show="true" tabindex="-1" role="dialog" aria-labelledby="help-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
Click this button to show the outside element:
<button type="button" class="btn" aria-hidden="true" id="test-item">Click it!</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function($) {
$('#test-item').click(function() {
$('#outside-element').attr('style','zIndex:1041');
});
})(jQuery);
</script>
正如你在上面的尝试中看到的,我设置了外部的z-index元素到1041,其比模式背景设置(1040)高一个。这不是完成我想要的(即,将#outside元素放在模态背景顶部),即使代码是声音和工作(即,它是最终修改z索引)。
As you can see in my current attempt above, I'm setting the z-index of the outside element to 1041, which is one higher than the .modal-backdrop setting (1040). This is not accomplishing what I want it to (namely, placing the #outside-element on top of the modal backdrop), even though the code is sound and "working" (that is, it's definitively modifying the z-index).
推荐答案
如果你有一个小提琴来显示你的代码,我们可以运行它,看看发生了什么。
It would be great if you have a fiddle to show your code in a way that we can run it and see what's going on.
您将需要包含元素的位置,以使z-index生效:
You will need to include the position of the element, for a z-index to take effect:
#outside-element {
position: relative;
z-index: 1041;
}
这篇关于在CSS Bootstrap jquery modal中显示模态背景之外的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!