Question

我正在尝试获取PDF以引导模式显示。尽管它已经出现并且所有模态功能都在起作用，但PDF显示在模态右侧

我尝试增加模式宽度。

HTML：

<div class='col-3'>
          <div class="container">
            <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">Application_ccps.pdf</h4>
                    </div>
                    <div class="modal-body">
                      <object width=500 height=575 data="Application_ccps.pdf"></object>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>

                </div>
            </div>

            <div class="panel panel-default" id="thepanel">
                <div class="panel-heading" id="panelheading">Documents submitted: 5</div>
                <div class="panel-body" id="panelbody">
                  <img src="pdficon.png"> &nbsp; <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
                  <img src="pdficon.png"> &nbsp; <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
                  <img src="pdficon.png"> &nbsp; <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
                  <img src="pdficon.png"> &nbsp; <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
                  <img src="pdficon.png"> &nbsp; <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
                </div>
              </div>
          </div>
        </div>

CSS：

#thepanel {
      width: 300px;
      height: 100%;
      max-height: 500px;
      line-height: 30px;
      font-family: Segoe UI;
    }

.pdfbutton {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.modal-body {
  text-align: center;
}

当单击PDF名称时，预期结果是模态中包含的PDF弹出窗口，但事实并非如此。

Answer 1

您可以为每个文件创建一个单独的模式，并为每个文件设置不同的ID，以便可以在按钮上调用它们

<img src="pdficon.png"> &nbsp; <button class="pdfbutton" data-toggle="modal" data-target="#myModal01">Application_ccps.pdf</button><br>

<div class='col-3'>
    <div class="container">
        <div class="modal fade" id="myModal01" role="dialog">
        ...
        </div>
    </div>
</div>

Answer 2

您可以简单地使用iframe代替object标签。

<iframe width=500 height=575 src="path_to_your_pdf.pdf"></iframe>

如何修复出现在模态之外的引导模态中的PDF

2 个答案: