부트 스트랩 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()); 
         } 
        } 
       } 
      } 
     );