bootstrap 3模式ID和类

Question

所以我想创建使用bootstrap.min css框架的简单模态视图，并且无法创建多个不同的模态。我知道它与ID和类有关（我知道ID是唯一的，并且类可以重复使用）...所以我认为它与重命名/编辑id = myModalLabel有关... ...？以下是我的代码，适用于portfolioModal1，但不适用于portfolioModal2。 portfolioModal2的按钮启动，但随后模式视图为空...

非常感谢您的帮助！

HTML：

<!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 


      <div class="row"> 
       <div class="col-sm-4"> 
        <div class="team-member"> 
         <img src="img/portfolio/dan-circle.png" class="img-responsive img-circle" alt=""> 
         <h4>Dan Druffel</h4> 
         <center><p class="text-muted">CEO</p></center> 
         <ul class="list-inline social-buttons"> 
          <li><a href="#"><i class="fa fa-twitter"></i></a> 
          </li> 
          <li><a href="#"><i class="fa fa-facebook"></i></a> 
          </li> 
          <li><a href="#"><i class="fa fa-linkedin"></i></a> 
          </li> 
         </ul><br> 
<a href="#portfolioModal1" class="btn btn-lg btn-success" 
    data-toggle="modal" 
    data-target="#portfolioModal1">About Dan</a> 
        </div> 
       </div> 


       <div class="col-sm-4"> 
        <div class="team-member"> 
         <img src="img/portfolio/pody-circle.png" class="img-responsive img-circle" alt=""> 
         <h4>Pody Druffel</h4> 
         <p class="text-muted">CFO</p> 
         <ul class="list-inline social-buttons"> 
          <li><a href="#"><i class="fa fa-twitter"></i></a> 
          </li> 
          <li><a href="#"><i class="fa fa-facebook"></i></a> 
          </li> 
          <li><a href="#"><i class="fa fa-linkedin"></i></a> 
          </li> 
         </ul><br> 

       <a href="#portfolioModal2" class="btn btn-lg btn-success" 
    data-toggle="modal" 
    data-target="#portfolioModal2">About Pody</a> 
        </div> 
       </div> 


<!-- Modal Views --> 
<div class="modal fade" id="portfolioModal1" 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">&amp;times;</button> 
      <h4 class="modal-title" id="myModalLabel">Dan founded the company in 1970 as a small lawncare company which quickly grew into the industry leading design build firm it is today. Dan has extensive project management experience serving as the general contractor on a plethora of different types of engagements for over four decades. As a testament to Dan's success the Ohio Nursery & Landscape Association Awards Program has accredited him with 26 state awards and the Civic Garden Center of Greater Cincinnati has accredited him with 20 Civic Beautification Awards. Dan is also a certified pesticide applicator.</h4> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

     </div> 
    </div> 
    </div> 


<div class="modal fade" id="portfolioModal2" 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">&amp;times;</button> 
      <h4 class="modal-title" id="myModalLabel">Pody became involved in the business in 1980. Pody manages the accounting and financial analysis for the businesses. Pody spent three years of her collegiate career at the Ohio State University before completing her Bachelor's in Business Administration from the University of Cincinnati with an emphasis in marketing. </h4> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

     </div> 
    </div> 
    </div> 

<!-- jQuery Version 1.11.0 --> 
<script src="js/jquery-1.11.0.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 

Answer 1

最好还是继承自举模式与Bootbox，这里是链接插件

http://bootboxjs.com/examples.html

，并调用它像这样

bootbox.dialog({ 
       title: "This is a form in a modal.", 
       message: '<div class="row"> ' + 
        '<div class="col-md-12"> ' + 
        '<form class="form-horizontal"> ' + 
        '<div class="form-group"> ' + 
        '<label class="col-md-4 control-label" for="name">Name</label> ' + 
        '<div class="col-md-4"> ' + 
        '<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' + 
        '<span class="help-block">Here goes your name</span> </div> ' + 
        '</div> ' + 
        '<div class="form-group"> ' + 
        '<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' + 
        '<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' + 
        '<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' + 
        'Really awesome </label> ' + 
        '</div><div class="radio"> <label for="awesomeness-1"> ' + 
        '<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' + 
        '</div> ' + 
        '</div> </div>' + 
        '</form> </div> </div>', 
       buttons: { 
        success: { 
         label: "Save", 
         className: "btn-success", 
         callback: function() { 
          var name = $('#name').val(); 
          var answer = $("input[name='awesomeness']:checked").val()); 
         } 
        } 
       } 
      } 
     );