Jquery 模态JS错误-对象不存在';t支持属性或方法';模态';
我试图显示一个模式弹出窗口,以显示网格中所选记录的详细信息。在模式弹出窗口中设置每个控件的值后,我尝试打开它,但失败了。 我已在站点母版页中包含了所有必需的引用,但不断出现“对象不支持属性或方法'modal'”错误: 在母版页中:Jquery 模态JS错误-对象不存在';t支持属性或方法';模态';,jquery,asp.net,twitter-bootstrap,bootstrap-modal,Jquery,Asp.net,Twitter Bootstrap,Bootstrap Modal,我试图显示一个模式弹出窗口,以显示网格中所选记录的详细信息。在模式弹出窗口中设置每个控件的值后,我尝试打开它,但失败了。 我已在站点母版页中包含了所有必需的引用,但不断出现“对象不支持属性或方法'modal'”错误: 在母版页中: <head runat="server"> <meta charset="utf-8" /> <meta http-equiv="cache-control" content="no-cache, no-store" /&
<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>
.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">×</button>
<h4 class="modal-title">Something</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
....
&时代;
某物
...
....
检查您的参考资料;我认为他们之间有冲突。
注释和取消注释引用以查找冲突。
希望它有用您的代码是正确的
可能的问题:
- 您需要将模式HTML代码应用于终端主控
body contantContentPlaceHolder
- 尽量在
结束前保持HTML格式 - 检查css中的其他元素
,它可能不会与此模型重叠z-index
- 确保它正在调用
$('#detailModal').modal('show')代码>,使用开发者工具栏和调试器(您已经应用了
)调试器
$(文档).ready(函数(){
$('#myBtn')。单击(函数(){
setDetailFields();
})
});
函数setDetailFields(记录,清除){
//在模式中填充控件
//var REQUID=记录[“请求ID”];
//...
//$('spnRequestID')。文本(请求ID);
//...
//$('detailModal').modal({background:'static',keyboard:false});
$('detailModal').modal('show');
}
显示模态
&时代;
某物
...
谢谢大家的回复。问题似乎是母版页中的以下两个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>
<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>