Question

我对此很陌生，如果有人点击像“尺寸表”这样的文字来打开模态中的图像，我只是想要这样做。我将模态添加到产品页面，并且顶部栏和标题徽标仅在产品页面上更改，在每个其他页面上它们看起来应该更改如果我使用这个代码，模态工作，但模态样式以某种方式破坏我的topbar和标题徽标的一部分。

你能帮帮我吗？

<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>

<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-default btn-xs" >Size chart</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <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">Modal title</h4>
    </div>
    <div class="modal-body">
        <img class="img-responsive" src="http://vmatechs.com/wp-content/uploads/2013/07/android.jpg" alt="image" />
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
 </div><!-- /.modal -->  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<body>

Answer 1

您的按钮文字错误，您需要更改“<a data-toggle="modal" href="#myModal" class="btn btn-default btn-xs" >Size chart</a>”，“<a data-toggle="modal" data-target="#myModal" class="btn btn-default btn-xs" >Size chart</a>”。请注意，我将“href =”更改为“data-toggle =”这是因为将其保留为href会使页面认为仍然是活动链接，但是当您将其更改为Bootstraps的数据目标方法时，它只需通过JS调用，这是我在这个片段中看到的唯一问题。

添加bootstrap模式会破坏topbar布局和标题

1 个答案: