Bootstrap模式弹出窗口在aspx中无法正常工作

时间:2013-10-10 04:36:50

标签: javascript jquery asp.net css twitter-bootstrap

我有这个按钮B1(比如说) 当我点击这个B1时,会出现一个带有按钮/链接

的模态弹出窗口

当我点击按钮/链接时,会出现一个新的弹出应该,但我没有得到模态窗口,但我确实得到了firebug

中的值

以下是Button B1的代码

<div class="thumbnail" ><img src="../Images/pix/B1.png" href="#B1Market" data-toggle="modal" /></div> 

然后调用此模态弹出窗口,其中包含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">&times;</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>

以下代码是divB1Market

中的链接/内容
<a href='#' data-dismiss='modal' onclick='JavaScript:" + (user.RoleID == 3 ? "PlayerMP." : "") + "showFunctionDetails(1," + drMTDFunction["PlayerID"] + "," + SessionID + "," + SessionNum + ");'>Link here</a>

其中inturn调用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";
    }
});}

这是aspx页面中的模式弹出内容

<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>

这是我打开firebug并用光标悬停时所得到的

enter image description here

但是当我尝试用firebug调试代码时,我得到了完美的响应(在控制台中)。我无法弄清楚错误的位置。

这是我导入包的顺序(因为我在使用时收到此错误而发布了这个)

$("#divFunctionalsSplit").modal().show();

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>

2 个答案:

答案 0 :(得分:2)

jQuery.noConflict();之前我需要添加的是$('#divID').modal('show') 它必须与其他插件相冲突。

答案 1 :(得分:0)

看起来你的模态的id被ASP覆盖了。它从#B1Market变为#divFunctionalSplit。我假设您的按钮仍然具有#B1Market的href。简单的解决方案是更改href以匹配div id。更好的解决方案是防止ASP替换id。