How to get my modal working?

Question

I wanted to put two modals in my website. But only the first one is working. The second modal is not working. When I click on the second button, the background just looks like dimmed and no modal is shown.

Here's the code

<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

You are missing some closing tags </div>, check the updated code below:

<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

You're missing closing divs in both modals.

Proper indentation should typically make such mistakes more visible.

However, when in doubt, run your html through a free tool.