模态 JS 错误 - 对象不支持属性或方法“模态”

Posted 2023-05-08

技术标签:

【中文标题】模态 JS 错误 - 对象不支持属性或方法“模态”【英文标题】：Modal JS error - Object doesn't support property or method 'modal' 【发布时间】：2019-03-24 22:37:00 【问题描述】：

我正在尝试显示一个模式弹出窗口以在网格中显示所选记录的详细信息。在模式弹出窗口中设置每个控件的值后，我尝试打开它并失败。我已在站点母版页中包含所有必需的引用，但不断收到“对象不支持属性或方法‘模态’”错误：

在母版页中：

<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="cache-control" content="no-cache, no-store" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <title><%: Page.Title %></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>

Javascript：

function setDetailFields(record, clear) debugger
    // populate controls in modal
    var reqID = record["RequestID"];
    ...

    $('#spnRequestID').text(reqID);
    ...

    //$('#detailModal').modal( backdrop: 'static', keyboard: false );
    $('#detailModal').modal('show');

.aspx:

<div class="modal fade" id="detailModal" role="dialog" aria-labelledby="catModalLabel" aria-hidden="true">
    <div class="modal-dialog fade in modal-lg ui-draggable">
        <div class="modal-content">    
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Something</h4>
            </div>
            <div class="modal-body"> 
                ...                  
            </div>
        </div>
    </div>
</div>
....

【问题讨论】：

【参考方案1】：

检查您的参考资料；我认为他们之间存在冲突。注释和取消注释引用以查找冲突。希望对你有用

【讨论】：

【参考方案2】：

你的代码是正确的

可能的问题：

需要将模态html代码应用到最后MasterContentPlaceHolderbody contant 尽量在 </body> 结尾之前保留 HTML 格式检查 css 中的其他元素 z-index，它可能与此模型不重叠确保它正在调用$('#detailModal').modal('show');，使用开发工具栏和调试器（您已经应用了debugger）

查看以下示例：

$(document).ready(function () 
    $('#myBtn').click(function () 
        setDetailFields();
    )
);

function setDetailFields(record, clear) 
    // populate controls in modal
    //var reqID = record["RequestID"];
    //...

    //$('#spnRequestID').text(reqID);
    //...

    //$('#detailModal').modal( backdrop: 'static', keyboard: false );
    $('#detailModal').modal('show');

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<button class='btnup' id="myBtn">Show Modal</button>

<div class="modal fade" id="detailModal" role="dialog" aria-labelledby="catModalLabel" aria-hidden="true">
    <div class="modal-dialog fade in modal-lg ui-draggable">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Something</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>

【讨论】：

【参考方案3】：

谢谢大家的回复。问题似乎是母版页中的以下两个 jquery 脚本引用。一旦我删除它们，模态就起作用了。

<body>
    <form id="MainForm" runat="server">
        <asp:ToolkitScriptManager ID="toolkitScriptMaster" runat="server" EnablePartialRendering="true" EnablePageMethods="true">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="jquery.ui.combined" />
            </Scripts>
        </asp:ToolkitScriptManager>

【讨论】：

以上是关于模态 JS 错误 - 对象不支持属性或方法“模态”的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 显示多个模态框（modal）

模态框 modal.js

js错误提示:对象不支持此属性或方法。

bootstrap 模态框 modal 插件在一个含有多个页面

bootstrap 模态框（modal）点击空白处和ESC不关闭的方法

$relatedQuery 方法不返回模态实体