Question

我正在开发NodeJS和MongoDB中的仪表板网站。在其中一个页面中，我必须在模态窗口中打开一个图像。以下是该页面的代码。

<!DOCTYPE html>
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Tor Modal Check</title>
      <link rel="stylesheet" href="css/style.default.css" type="text/css" />
      <link rel="stylesheet" href="css/responsive-tables.css">
      <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
      <script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
      <script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
      <script type="text/javascript" src="js/modernizr.min.js"></script>
      <script type="text/javascript" src="js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/jquery.bxSlider.min.js"></script>
      <script type="text/javascript" src="js/jquery.cookie.js"></script>
      <script type="text/javascript" src="js/jquery.uniform.min.js"></script>
      <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" src="js/flot/jquery.flot.min.js"></script>
      <script type="text/javascript" src="js/jquery.slimscroll.js"></script>
      <script type="text/javascript" src="js/flot/jquery.flot.pie.min.js"></script>
      <script type="text/javascript" src="js/flot/jquery.flot.resize.min.js"></script>
      <script type="text/javascript" src="js/responsive-tables.js"></script>
      <script type="text/javascript" src="js/custom.js"></script>

      <style type="text/css">
          body .modal {
            width: 650px;
            margin-left: -325px;
          }
      </style>
  </head>
  <body>
  <div class="mainwrapper">


  <div class="rightpanel">

    <ul class="commentlist">
      <% tor.forEach(function(t){ %>
        <li>
          <img src="images/screenshot/<%= t.screenshot %>" alt="" style="width: 60px;" class="pull-left" />
          <div class="comment-info">
            <h4><a href="<%= t.url %>"><%= t.url %></a></h4>
            <p><strong>Comments: </strong><%= t.comments %></p>
            <div class="container">
              <!-- Trigger the modal with a button -->
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#<%= t.modalid %>">Show Screenshot</button>

              <!-- Modal -->
              <div class="modal fade" id="<%= t.modalid %>" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title"><%= t.url %></h4>
                    </div>
                    <div class="modal-body">
                      <img src="images/screenshot/<%= t.screenshot %>" height="100%" width="100%">
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </div>
        </li>
      <% }) %>
    </ul>
    </div>
    </div>
  </body>

我面临的问题是并非所有“查看屏幕截图”都是可点击的。经过深入挖掘后，我认为这是因为“右板”div类。

/*** MAIN PANEL ***/

.rightpanel { margin-left: 260px; background: #f7f7f7; }
.rightpanel:after { clear: both; content: ''; display: block; }

如果我删除margin-left: 260px;，一切都按预期工作。知道为什么会这样，以及如何克服它？

PS。这不是完整的代码。只有对这个问题有意义的代码。

编辑1： 当我将margin-left: 260px更改为margin-left: 150px时，它完全正常。

Answer 1

Bootstrap modals已经居中并且有三种尺寸（.modal-sm为300px，600px（默认）和.modal-lg为900px）。但是，如果您需要宽度精确为650px，则应设置.modal-dialog的宽度，而不是.modal。例如：

@media (min-width: 768px)
.modal-dialog {
    width: 650px;
}

NodeJS中的Bootstrap Modal Windows

1 个答案: