我一直在尝试从jquery调用bootstrap模式并不断收到此错误消息：
TypeError: $(...).modal is not a function
这是我的代码：
<button id="btnTest" class="btn btn-default">Show Modal</button>
<div id="dummyModal" role="dialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p>Quick Brown Fox Jumps Over The Lazy Dog</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript">
$('document').ready(function () {
$('#btnTest').click(function () {
$('#dummyModal').modal('show');
});
});
</script>
仅供参考，我使用bootstrap 3.3.5和jquery 1.11.3。我从this thread尝试了jQuery.noConflict(); ... etc，但仍然没有运气。这是complete code
答案 0 :(得分：12)
使用它。
它会工作。
我使用了bootstrap 3.3.5和jquery 1.11.3
$('document').ready(function() {
$('#btnTest').click(function() {
$('#dummyModal').modal('show');
});
});body {
background-color: #eee;
padding-top: 40px;
padding-bottom: 40px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Modal Test</title>
</head>
<body>
<div class="container">
<button id="btnTest" class="btn btn-default">Show Modal</button>
<div id="dummyModal" role="dialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p>Quick Brown Fox Jumps Over The Lazy Dog</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
答案 1 :(得分：4)
当我试图从jquery调用bootstrap模态时，我也遇到了同样的错误。但这是因为我们正在使用bootstrap模式，为此我们需要附加一个cdn bootstrap.min.js，这是
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
希望这会有所帮助，因为当我尝试使用
从jQuery调用bootstrap模式时我错过了 $('#button').on('click',function(){
$('#myModal').modal();
});
myModal是Bootstrap模式的id
当你打电话点击该按钮时，你必须给按钮发一个点击事件，弹出模式会显示出来。
答案 2 :(得分：1)
由于jquery CDN（<?php
$pid = isset($_GET['pid']) ? $_GET['pid'] : die('ERROR: Record ID not found.');
// include database connection
include 'config/database.php';
// read current record's data
try
{
// prepare select query
$query = "SELECT * FROM review WHERE pid = '$pid'";
$stmt = $con->prepare($query);
// execute our query
$stmt->execute();
$num = $stmt->rowCount();
// echo $num;
if ($num > 0)
{
while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
$questionList[] = $question;
$risk1List[] = $risk1;
$comment1List[] = $comment1;
$risk2List[] = $risk2;
$comment2List[] = $comment2;
}
}
}
// show error
catch(PDOException $exception)
{
die('ERROR: ' . $exception->getMessage());
}
?>
<?php
// include database connection
include 'config/database.php';
try
{
$questions = $_POST['questions'];
$risk1 = $_POST['risk1'];
$risk2 = $_POST['risk2'];
$comment1 = $_POST['comment1'];
$comment2 = $_POST['comment2'];
$totalQuestion = sizeof($questions);
for ($i = 0; $i < $totalQuestion; $i++)
{
$InsertQuestion = $questions[$i];
$InsertRisk1 = $risk1[$i];
$InsertComment1 = $comment1[$i];
$InsertRisk2 = $risk2[$i];
$InsertComment2 = $comment2[$i];
$query2 = "UPDATE review SET question = '$InsertQuestion',
risk1 = '$InsertRisk1', comment1 = '$InsertComment1',
risk2 = '$InsertRisk2', comment2 = '$InsertComment2'
WHERE pid = '$pid'";
$stmt2 = $con->prepare($query2);
$stmt2->execute();
}
}
catch(PDOException $exception)
{
die('ERROR: ' . $exception->getMessage());
}
?>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]. "?pid={$pid}");?>" method="post">
<table>
<tr>
<td><strong style="font-size: 16px;"><font color="blue">Project ID</font></strong></td>
<td><input type='hidden' name='pid'><?php echo htmlspecialchars($pid, ENT_QUOTES); ?></td>
</tr>
</table>
<table>
<thead>
<tr>
<th>Question</th>
<th>Risk1</th>
<th>Comment1</th>
<th>Risk2</th>
<th>Comment2</th>
</tr>
</thead>
<tbody>
<tr>
<td><textarea style="resize:none" name='questions[]' rows="2" class='form-control'><?php echo htmlspecialchars($questionList[0], ENT_QUOTES); ?></textarea></td>
<td ><input type="text" name='risk1[]' class='colors form-control' style="height:30px; width:50px;" value="<?php echo htmlspecialchars($risk1List[0], ENT_QUOTES); ?>" /></td>
<td ><textarea style="resize:none" name='comment1[]' rows="2" class='form-control'><?php echo htmlspecialchars($comment1List[0], ENT_QUOTES); ?></textarea></td>
<td ><input type="text" name='risk2[]' class='colors form-control' style="height:30px; width:50px;" value="<?php echo htmlspecialchars($risk2List[0], ENT_QUOTES); ?>" /></td>
<td ><textarea style="resize:none" name='comment2[]' rows="2" class='form-control'><?php echo htmlspecialchars($comment2List[0], ENT_QUOTES); ?></textarea></td>
</tr>
<tr>
<td><textarea style="resize:none" name='questions[]' rows="2" class='form-control'><?php echo htmlspecialchars($questionList[1], ENT_QUOTES); ?></textarea></td>
<td ><input type="text" name='risk1[]' class='colors form-control' style="height:30px; width:50px;" value="<?php echo htmlspecialchars($risk1List[1], ENT_QUOTES); ?>" /></td>
<td ><textarea style="resize:none" name='comment1[]' rows="2" class='form-control'><?php echo htmlspecialchars($comment1List[1], ENT_QUOTES); ?></textarea></td>
<td ><input type="text" name='risk2[]' class='colors form-control' style="height:30px; width:50px;" value="<?php echo htmlspecialchars($risk2List[1], ENT_QUOTES); ?>" /></td>
<td ><textarea style="resize:none" name='comment2[]' rows="2" class='form-control'><?php echo htmlspecialchars($comment2List[1], ENT_QUOTES); ?></textarea></td>
</tr>
</tbody>
</table>
<td>
<input type='submit' value='Save Data' />
</td>
</form>
）在HTML头中被添加了两次，所以我遇到了同样的错误。
答案 3 :(得分：1)
两次添加jquery * .js文件引用也会导致此问题。它可能是捆绑软件的一部分，您也可能已添加到页面中。因此，您需要删除其他参考，例如
答案 4 :(得分：-2)
如果您正在使用任何布局页面，请在布局页面中从底部到头部移动脚本部分。 bcz，应首先加载javascript文件。这对我有用