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

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

尝试查看是否已将其添加到图像或按钮：

upload_max_filesize = -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>

让我知道这是否有帮助。

单击图像无法显示模式

1 个答案: