如何让我的模态工作？

Question

我想在我的网站上放两个模态。但只有第一个正在运作。第二种模式不起作用。当我点击第二个按钮时，背景看起来像是暗淡的，没有显示模态。

这是代码

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

<div class="col-md-4">
  <ul class="list-inline quicklinks">
    <li class="list-inline-item"><a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">Privacy Policy</a>
    </li>
    <li class="list-inline-item"><a href="#bannerformmodal1" data-toggle="modal" data-target="#bannerformmodal1">Terms and conditions</a>
    </li>
  </ul>
</div>
<div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true" id="bannerformmodal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <h2 class="text-xs-center">Privacy Policy</h2>
          <div class="col-md-12">
            some text.
          </div>
          <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade bannerformmodal1" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal1" aria-hidden="true" id="bannerformmodal1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <h2 class="text-xs-center">Terms and conditions</h2>
            <div class="col-md-12">
              Some text here.
            </div>
            <div class="modal-footer">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

您缺少一些结束标记</div>，请查看以下更新的代码：

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

<div class="col-md-4">
  <ul class="list-inline quicklinks">
    <li class="list-inline-item"><a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">Privacy Policy</a>
    </li>
    <li class="list-inline-item"><a href="#bannerformmodal1" data-toggle="modal" data-target="#bannerformmodal1">Terms and conditions</a>
    </li>
  </ul>
</div>
<div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true" id="bannerformmodal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <h2 class="text-xs-center">Privacy Policy</h2>
          <div class="col-md-12">
            some text.
          </div>
          <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade bannerformmodal1" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal1" aria-hidden="true" id="bannerformmodal1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <h2 class="text-xs-center">Terms and conditions</h2>
          <div class="col-md-12">
            Some text here.
          </div>
          <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

Answer 2

你错过了两个模态中的div关闭。

正确的缩进通常会使这些错误更加明显。

但是，如果有疑问，请运行您的html through a free tool。