twitter-bootstrap Bootstrap 模式仅显示背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23384652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap modal only showing backdrop
提问by James
EDIT:I've found the issue. Turns out the person who originally made this page missed a closing <div>tag on modal s/he had created, so the content of my modal was hidden inside the original.
编辑：我发现了这个问题。原来制作这个页面的人错过了<div>他/她创建的模态的结束标签，所以我的模态的内容隐藏在原件中。
My bootstrap modal is not showing the dialog box, instead only showing the darkened backdrop. I have the following Modal set up in the footer of my page.
我的引导模式没有显示对话框，而是只显示变暗的背景。我在页面的页脚中设置了以下模态。
<div id="timePopup" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" style='border-radius:0px;width:430px;margin-left:-215px'>
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="position: absolute; top: 3px; right: 7px; z-index: 9999;">×</button>
<div class="modal-body" style='border: black solid 2px;margin: 5px;'>
<?php echo $popup_content; ?>
</div>
</div>
</div>
$popup_contentjust contains the simple string 'Test test test test'. It is triggered by an onclickattribute in a <span>which call this function
$popup_content只包含简单的字符串“Test test test test”。它由调用此函数的onclicka<span>中的属性触发
function forcePopUp(){
jQuery('#timePopup').modal('show');
}
The exact same code worked on our development server, but since moving it to the testserver this has started happening, or not happening i suppose.
完全相同的代码在我们的开发服务器上工作，但是自从将它移到测试服务器后，这已经开始发生，或者我想没有发生。
From another post on SO I tried removing the .hide class from the modal, and have ensured this modal has a unique id. Any other ideas why would be appreciated.
在 SO 上的另一篇文章中，我尝试从模态中删除 .hide 类，并确保该模态具有唯一的 ID。任何其他想法为什么将不胜感激。
回答by Fven
Try:
尝试：
$(function(){
$('.selector').click(function() {
$('#timePopup').modal('show');
});
});
Where .selector refers to a class or id in your span element.
其中 .selector 指的是 span 元素中的类或 id。
回答by Jacek Pietal
Change the container style property
更改容器样式属性
z-index: 10
go up as long as it's hidden experiment which container should have this
只要是隐藏的实验，哪个容器应该有这个
回答by Andiana
May be it's an old question. I faded it today and these are my cases of this error:
可能是个老问题。我今天褪色了，这些是我遇到这个错误的情况：
1/ CSS conflict Try to remove some strange css link in your page when debugging and view the result, some CSS library not working with Bootstrap together
1/ CSS 冲突 调试时尝试删除页面中一些奇怪的 css 链接并查看结果，某些 CSS 库与 Bootstrap 不兼容
2/ Error in ajax posting, the data never return If in your code have something like
2/ ajax 发布错误，数据永远不会返回如果在你的代码中有类似的东西
$(function () {
$.ajax({
type: "POST",
url: '@Url.Action("GetCarts", "Cart")',
success: function (data) {
var result = data;
$('#myCart').html(result);
alert(data);
},
fail: function () {
alert("Error with ajax");
}
});
});
And you cannot alert the data, that is code-side error, not an design-side error
并且您无法提醒数据，即代码端错误，而不是设计端错误
回答by pscheit
If the model html is rendered into a hidden area of the page, it won't display either
如果模型 html 被渲染到页面的隐藏区域，它也不会显示
回答by imtaher
<div id="timePopup" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" style='border-radius:0px;width:430px;margin-left:-215px'>
<div class="modal-body">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="position: absolute; top: 3px; right: 7px; z-index: 9999;">×</button>
</div>
<div class="modal-body" style='border: black solid 2px;margin: 5px;'>
<?php echo $popup_content; ?>
</div>
</div>
</div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#timePopup">Open Small Modal</button>
if you remove inline css the model will come on middle demo link https://jsfiddle.net/kingtaherkings/fcnLqyhf/2/
如果您删除内联 css，该模型将出现在中间演示链接 https://jsfiddle.net/kingtaherkings/fcnLqyhf/2/
回答by Tibix
I just removed some of the CSS on the Elements and replaced the jQuery Function.
我刚刚删除了 Elements 上的一些 CSS 并替换了 jQuery 函数。
$(".modal-btn").click( function(){
$("#timePopup").toggle(300);
});
Also the data-dismiss is not necessary here, since you can handle it all in jQuery with .toggle() .hide() .show().
此外，这里不需要数据关闭，因为您可以在 jQuery 中使用.toggle() .hide() .show().
回答by Onshop
I had this issue when calling a mal-formed URL. I was missing the action at the end:
我在调用格式错误的 URL 时遇到了这个问题。我错过了最后的动作：
$('#campaign-bulk-create').load( DD.baseDir + '/my-controller').modal('show');
Should have been:
本来应该：
$('#campaign-bulk-create').load( DD.baseDir + '/my-controller/my-action').modal('show');
This was not immediately apparent because the modal doesn't try to request it.
这不是很明显，因为模态不会尝试请求它。
回答by aseroff
If you have a namespace collision between your modal and another element (identical idattributes, or however your modal selects its content), and the conflicting element is higher in the DOM, triggering the modal will make the modal backdrop appear but your modal won't be selected to be shown. Instead, JS will find the first matching element, which in this case is the conflicting element. The solution is of course to rename one of your elements.
如果您的模态和另一个元素（相同的id属性，或者您的模态选择其内容）之间存在命名空间冲突，并且冲突元素在 DOM 中较高，则触发模态将使模态背景出现，但您的模态不会被选中显示。相反，JS 会找到第一个匹配的元素，在这种情况下是冲突元素。解决方案当然是重命名您的元素之一。
