无法通过单击图像显示模态

Question

我创建了一个测试模式，因此我希望在我们单击图像时打开它，但它不起作用，它会打开另一个页面，网址末尾带有#myModal。我该怎么做才能解决这个问题？

这是我的测试模式：

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">This is the header</h2>
        <button type="button" class="close"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <p>This is the modal body</p>
      </div>
    </div>
  </div>
</div> 

这是我的清单，包括图片：

<div class="news-items-wrapper">
          <div class="news-wrapper" *ngFor="let item of section.items">
            <div class="news-item-wrapper">
              <a class="thumb" data-toggle="modal" href="#myModal"
                 [ngStyle]="{'background-image': 'url(' + item.thumbnail + ')'}">
              </a>
              <div class="info">
                <a class="title" [href]="item.youtube" target="_blank">{{ item.title }}</a>
                <div class="description" [innerHTML]="item.description"></div>
              </div>
            </div>
          </div>
        </div>

Answer 1

我将提供我使用的代码，希望对您有所帮助。

试试看你是否将它添加到你的图像或按钮中：

data-target="#show-details-modal" data-toggle="modal"

我所做的一个例子：

<a href="#" data-target="#show-details-modal" data-toggle="modal">Display text goes here</a>

然后使用以下模态：

<div id="show-details-modal" class="modal fade" style="width:100%">
    <div class="modal-dialog modal-lg">
        <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"></h4>
                <div id="loadingPanelShowDetails" class="col-md-12 text-center" style="display: none;">
                    <br />
                    <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-info" style="width: 100%">...LOADING...</div>
                    </div>
                </div>
                <div id="target-show-details">

                </div>
            </div>
        </div>
    </div>
</div>

还可以尝试在您的模式所在的页面上引用以下内容：

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

让我知道这是否有帮助。