twitter-bootstrap Bootstrap 模式弹出窗口在 aspx 中无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19287137/
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 popup not working properly in aspx
提问by jayeshkv
i have this button B1 (say) when i click on this B1 a modal popup appears with buttons / links
我有这个按钮 B1（比如说）当我点击这个 B1 时会出现一个带有按钮/链接的模式弹出窗口
when i click the button / link a new popup shouldappear but i dont get the Modal window but i do get the values in firebug
当我点击按钮/链接时，应该会出现一个新的弹出窗口，但我没有得到模态窗口，但我确实得到了值firebug
Here is the code to the Button B1
这是按钮 B1 的代码
<div class="thumbnail" ><img src="../Images/pix/B1.png" href="#B1Market" data-toggle="modal" /></div>
which then calls this modal popup which contains the content from the div divB1Market
然后调用此模式弹出窗口，其中包含来自 div 的内容 divB1Market
<div class = "modal fade" id="B1Market" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Heading</h3>
</div>
<div class="modal-body">
<div id='divB1Market' runat="server"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
</div>
</div>
</div>
The code below is the link / content inside the divB1Market
下面的代码是里面的链接/内容 divB1Market
<a href='#' data-dismiss='modal' onclick='JavaScript:" + (user.RoleID == 3 ? "PlayerMP." : "") + "showFunctionDetails(1," + drMTDFunction["PlayerID"] + "," + SessionID + "," + SessionNum + ");'>Link here</a>
which inturn calls the ajax call
反过来调用ajax调用
PlayerMP.getFunctionDetails = function (type, UserID, SessionID, SessionNo) {
$.ajax({
type: "GET",
url: PlayerMP.URL,
data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo,
success: function (FinancialSplitsJS) {
if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {
$("#divFunctionalDetails").html(FunctionalSplitsJS);
switch (type) {
case 1:
$("#divFunctionalsSplit");
break;
}
$("#divFunctionalsSplit").show(); /* calling the div with this id in the aspx page */
}
else
window.location.href = "../Login.aspx?SessionExpired=1";
}
});}
This is the modal-popup content in the aspx page
这是aspx页面中modal-popup的内容
<div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <%--this is the one not showing up--%>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Content</h3>
</div>
<div class="modal-body">
<div id="divFunctionalDetails" style="color:Black;"></div>
</div>
</div>
</div>
</div>
This is what i get when i openup firebug and hover around with my cursor
这是我打开萤火虫并用光标悬停时得到的结果
But when i try to debug the code with firebug i get the responses (in the console) perfectly. I'm not able to figure out where the error might be.
但是当我尝试使用 firebug 调试代码时，我得到了完美的响应（在控制台中）。我无法弄清楚错误可能在哪里。
This is the order of my importing the packages (posted this because i got this error while using )
这是我导入包的顺序（发布这个是因为我在使用时遇到了这个错误）
$("#divFunctionalsSplit").modal().show();
Uncaught TypeError: Object #<Object> has no method 'modal'
Uncaught TypeError: Object #<Object> has no method 'modal'
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<!-- Start of BootStrap -->
<link href="../Scripts/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
回答by jayeshkv
All I needed to add was jQuery.noConflict();before $('#divID').modal('show')it had to something to do with with other plugins conflicting.
我需要添加的只是jQuery.noConflict();在$('#divID').modal('show')它与其他插件冲突有关之前。
回答by iamsar
It would appear that the id of your modal is getting overwritten by ASP. It changes from #B1Market to #divFunctionalSplit. I assume your button still has an href of #B1Market. Simple solution would be to change the href to match the div id. Better solution would be to prevent ASP from replacing the id.
看起来您的模式的 id 正在被 ASP 覆盖。它从#B1Market 更改为#divFunctionalSplit。我假设您的按钮仍然具有#B1Market 的 href。简单的解决方案是更改 href 以匹配 div id。更好的解决方案是防止 ASP 替换 id。
