Question

我已成功使用bootstrap模式/弹出很长一段时间。但这是一个令我感到惊讶的有趣案例。

如果你有一个带有标签的模态，那么我会得到预期的结果。它可以正常工作。

但是如果你有多个带标签的模态，那么第一个模态可以正常工作。其他人的标签没有响应。

您可以在下面的代码段中看到示例。

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap - Modal Demo With Tabs</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <h5 style="text-align: center;">Bootstrap - Modal Demo - With Tabs Within</h5>
        <div class="row text-center">
            <h4>Page One Modal #1 - Basic</h4>
            <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Page One Modal #1</a>
        </div>
     
        <div class="row text-center">
            <h4>Page One Modal #2 - Large</h4>
            <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#largeModal">Page One Modal #2</a>
        </div>
        <hr>
            </div>

    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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" id="myModalLabel">Basic Modal</h4>
          </div>
          <div class="modal-body">
            <h3>Modal Body</h3>
          </div>
          
          <div class="tab-v2">
            <ul class="nav nav-tabs" id="myTab">
              <li><a href="#about" data-toggle="tab">About Us</a></li>
              <li><a href="#info" data-toggle="tab">Information</a></li>
              <li><a href="#survey" data-toggle="tab">Survey</a></li>
            </ul>
          
            <div class="tab-content">
              <div class="tab-pane fade in " id="about">
              <br>
              <p>About Us</p>
              </div>
          
              <div class="tab-pane fade in" id="info">
              <br>          
              <p>Information</p>          
              </div>
              <div class="tab-pane fade in" id="survey">
                <br>
                 <p>Survey</p>
              </div>
          
            </div>
          </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>
      </div>
    </div>

    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <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" id="myModalLabel">Large Modal</h4>
          </div>
          <div class="modal-body">
            <h3>Modal Body</h3>
          </div>
          
          
          <div class="tab-v2">
            <ul class="nav nav-tabs" id="myTab">
              <li><a href="#about" data-toggle="tab">About Us</a></li>
              <li><a href="#info" data-toggle="tab">Information</a></li>
              <li><a href="#survey" data-toggle="tab">Survey</a></li>
            </ul>
          
            <div class="tab-content">
              <div class="tab-pane fade in " id="about">
              <br>
              <p>About Us 2</p>
              </div>
          
              <div class="tab-pane fade in" id="info">
              <br>          
              <p>Information 2</p>          
              </div>
              <div class="tab-pane fade in" id="survey">
                <br>
                 <p>Survey 2</p>
              </div>
          
            </div>
          </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>
      </div>
    </div>

    

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

＆＃13;

Answer 1

两个标签中都有相同的ID。

将第二个标签的ID更改为例如about-2，info-2和survey-2。别忘了改变href属性。

<div class="tab-v2">

  <ul class="nav nav-tabs" id="myTab">
    <li><a href="#about-2" data-toggle="tab">About Us</a></li>
    <li><a href="#info-2" data-toggle="tab">Information</a></li>
    <li><a href="#survey-2" data-toggle="tab">Survey</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane fade in " id="about-2">
    <br>
    <p>About Us 2</p>
  </div>

  <div class="tab-pane fade in" id="info-2">
    <br>          
    <p>Information 2</p>          
  </div>

  <div class="tab-pane fade in" id="survey-2">
    <br>
    <p>Survey 2</p>
  </div>

</div>

带有选项卡的两个Bootstrap模态

1 个答案: