我想在单击图像或按钮时打开引导模式。我添加了代码,但是当我点击图片时,我收到以下错误 -
ERROR ReferenceError: $ is not defined(…)
和Error context
,附上下面的截图
以下是我的page.html
代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn" (click)="openmodal()">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<img (click)="openmodal()" src="https://img.megaobzor.com/old/hardmind/artpreview/CarZaz1.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
<router-outlet></router-outlet>
我的page.ts
代码
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
declare var $: any; //intentional use of jQuery
@Component({
selector: 'app-changeimage',
templateUrl: './changeimage.component.html',
styleUrls: ['./changeimage.component.css']
})
export class ChangeimageComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openmodal(){
console.log("image clicked");
$("#myModal").modal();
$('.modal')
.prop('class', 'modal fade') // revert to default
.addClass( $(this).data('direction') );
$('.modal').modal('show');
}
}
我想跟随这个小提琴 - http://jsfiddle.net/daverogers/mu5mvba0/
请帮忙