单击图像时无法打开Bootstrap模式 - angular2

时间:2017-06-22 06:36:40

标签: javascript angular typescript twitter-bootstrap-3

我想在单击图像或按钮时打开引导模式。我添加了代码,但是当我点击图片时,我收到以下错误 -

ERROR ReferenceError: $ is not defined(…)Error context,附上下面的截图 enter image description here

以下是我的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">&times;</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/

请帮忙

0 个答案:

没有答案